import React from "react";
      import { createPopper } from "@popperjs/core";
      
      const Tooltip = ({ color }) => {
        const [tooltipShow, setTooltipShow] = React.useState(false);
        const btnRef = React.createRef();
        const tooltipRef = React.createRef();
        const openLeftTooltip = () => {
          createPopper(btnRef.current, tooltipRef.current, {
            placement: "left"
          });
          setTooltipShow(true);
        };
        const closeLeftTooltip = () => {
          setTooltipShow(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"
                  onMouseEnter={openLeftTooltip}
                  onMouseLeave={closeLeftTooltip}
                  ref={btnRef}
                >
                  left {color}
                </button>
                <div
                  className={
                    (tooltipShow ? "" : "hidden ") +
                    "bg-" +
                    color +
                    "-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg"
                  }
                  ref={tooltipRef}
                >
                  <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} tooltip 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 TooltipRender() {
        return (
          <>
            return <Tooltip color="pink" />
          </>
        );
      }

      Javascript language logo
      your recipe card header background
      Tooltips

      Tailwind Components

      When importing React, you also need to include the Popperjs Core JS module. This module provides the createPopper() function required to create a PopperJS component. The createPopper() function returns a React component which will be wrapped in a <div> element. In the code above, the Tooltip component will be wrapped in a <div> element and will have a pink color.

      The Tooltip component will have two child components. The first child component will be the <button> element which will be responsible for displaying the tooltip title. The second child component will be the <div> element which will be responsible for displaying the tooltip content.

      When the user clicks on the <button> element, the openLeftTooltip() function will be called. This function will create a PopperJS component which will be placed to the left of the <button> element. The closeLeftTooltip() function will be called when the user clicks on the <button> element to hide the tooltip.

      0 Comments

        Add Comment

        Log in to add a comment

        Codiga - All rights reserved 2022.