React Tooltips

Material Tailwind tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.


Tooltip Left

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Tooltips from "@material-tailwind/react/Tooltips";
import TooltipsContent from "@material-tailwind/react/TooltipsContent";

export default function Tooltips() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Tooltip left
            </Button>

            <Tooltips placement="left" ref={buttonRef}>
                <TooltipContents>Tooltip left</TooltipContents>
            </Tooltips>
        </>
    );
}
 

Tooltip Right

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Tooltips from "@material-tailwind/react/Tooltips";
import TooltipsContent from "@material-tailwind/react/TooltipsContent";

export default function Tooltips() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Tooltip right
            </Button>

            <Tooltips placement="right" ref={buttonRef}>
                <TooltipContents>Tooltip right</TooltipContents>
            </Tooltips>
        </>
    );
}
 

Tooltip Top

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Tooltips from "@material-tailwind/react/Tooltips";
import TooltipsContent from "@material-tailwind/react/TooltipsContent";

export default function Tooltips() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Tooltip top
            </Button>

            <Tooltips placement="top" ref={buttonRef}>
                <TooltipContents>Tooltip top</TooltipContents>
            </Tooltips>
        </>
    );
}
 

Tooltip Bottom

import React, { useRef } from "react";
import Button from "@material-tailwind/react/Button";
import Tooltips from "@material-tailwind/react/Tooltips";
import TooltipsContent from "@material-tailwind/react/TooltipsContent";

export default function Tooltips() {
    const buttonRef = useRef();

    return (
        <>
            <Button color="lightBlue" ref={buttonRef} ripple="light">
                Tooltip bottom
            </Button>

            <Tooltips placement="bottom" ref={buttonRef}>
                <TooltipContents>Tooltip bottom</TooltipContents>
            </Tooltips>
        </>
    );
}