Tailwind CSS Tooltip - React

Customise your web projects with an easy-to-use and responsive Tailwind CSS Tooltip!

A Tooltip is a small pop-up element that appears while the user moves the mouse pointer over an element. Use it when you want to specify extra information about something when the user moves the mouse pointer over an element.

See below our example that will help you create a simple Tooltip for your React project.


import { Tooltip, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Tooltip content="Material Tailwind">
      <Button variant="gradient">Show Tooltip</Button>
    </Tooltip>
  );
}

Tooltip Placement

You can change the position of the Tooltip component using the placement prop.

import { Fragment } from "react";
import {
  Popover,
  PopoverHandler,
  PopoverContent,
  Button,
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Fragment>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="top">
          <Button variant="gradient">Top</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="top-start">
          <Button variant="gradient">Top Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="top-end">
          <Button variant="gradient">Top End</Button>
        </Tooltip>
      </div>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="right">
          <Button variant="gradient">Right</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="right-start">
          <Button variant="gradient">Right Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="right-end">
          <Button variant="gradient">Right End</Button>
        </Tooltip>
      </div>
      <div className="mb-3 flex gap-3">
        <Tooltip content="Material Tailwind" placement="bottom">
          <Button variant="gradient">Bottom</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="bottom-start">
          <Button variant="gradient">Bottom Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="bottom-end">
          <Button variant="gradient">Bottom End</Button>
        </Tooltip>
      </div>
      <div className="flex gap-3">
        <Tooltip content="Material Tailwind" placement="left">
          <Button variant="gradient">Left</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="left-start">
          <Button variant="gradient">Left Start</Button>
        </Tooltip>
        <Tooltip content="Material Tailwind" placement="left-end">
          <Button variant="gradient">Left End</Button>
        </Tooltip>
      </div>
    </Fragment>
  );
}

Custom Tooltip Animation

You can modify the open/close state animation for Tooltip component using the animate prop.

import { Tooltip, Button } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Tooltip
      content="Material Tailwind"
      animate={{
        mount: { scale: 1, y: 0 },
        unmount: { scale: 0, y: 25 },
      }}
    >
      <Button variant="gradient">Show Tooltip</Button>
    </Tooltip>
  );
}

Related

Props

Learn more about props definition and types of tooltip components.

Theme

Learn how to customize the theme and styles for tooltip components.

textarea

typography

Edit this page on Github