import React from "react";
      import { createPopper } from "@popperjs/core";
      
      const Popover = ({ color }) => {
        const [popoverShow, setPopoverShow] = React.useState(false);
        const btnRef = React.createRef();
        const popoverRef = React.createRef();
        const openPopover = () => {
          createPopper(btnRef.current, popoverRef.current, {
            placement: "top"
          });
          setPopoverShow(true);
        };
        const closePopover = () => {
          setPopoverShow(false);
        };
        return (
          <>
            <div className="flex flex-wrap">
              <div className="w-full text-center">
                <button
                  className={
                    "bg-" +
                    this.state.color +
                    "-500 text-white active:bg-" +
                    this.state.color +
                    "-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
                  }
                  type="button"
                  onClick={() => {
                    popoverShow ? closePopover() : openPopover();
                  }}
                  ref={btnRef}
                >
                  top {color}
                </button>
                <div
                  className={
                    (popoverShow ? "" : "hidden ") +
                    "bg-" +
                    color +
                    "-600 border-0 mb-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg"
                  }
                  ref={popoverRef}
                >
                  <div>
                    <div
                      className={
                        "bg-" +
                        color +
                        "-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-slate-100 uppercase rounded-t-lg"
                      }
                    >
                      {color} popover title
                    </div>
                    <div className="text-white p-3">
                      And here's some amazing content. It's very engaging. Right?
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        );
      };
      
      export default function PopoverRender() {
        return (
          <>
            return <Popover color="pink" />
          </>
        );
      }

      Javascript language logoPopovers

      Tailwind Components

      In this code, we are importing React and creating a simple Popover component. We are also importing the PopperJS library.

      We first define a state variable called popoverShow. This variable will be used to track the current show/hide state of the Popover component.

      Next, we create two React references, one for the btnRef component and one for the popoverRef component.

      We also create two functions, openPopover and closePopover. These functions will be used to create and/or destroy the Popover component.

      Finally, we return the component HTML.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.