Use the tooltip component from Flowbite React to indicate helpful information when hovering over an element such as a button or link to improve the UI/UX of your website.

Choose from multiple options, layouts, styles, colors, and animations from the examples below and customize the content and options using the custom React API props and the utility classes from Tailwind CSS.

Before using the tooltip component, make sure to import the component in your React project:

import { Tooltip } from "flowbite-react";

Wrap the trigger component with the <Tooltip> component and pass the tooltip content to the content prop of the <Tooltip> component.

This will render the tooltip whenever you hover over the trigger component.

Use the style prop to change the style of the tooltip. The default style is light and you can also use dark.

Placement#

Update the placement of the tooltip using the placement prop. The default placement is top and you can also use right, bottom, and left.

Trigger type#

Use the trigger prop to change the trigger type of the tooltip if you want to show the tooltip when clicking on the trigger element instead of hovering over it.

The default trigger type is hover and you can also use click.

Animation#

Update the default animation of the tooltip component by using the animation prop. The default animation is duration-300 and you can also use duration-150, duration-500, and duration-1000.

Disable arrow#

You can disable the arrow of the tooltip component by passing the arrow prop with a value of false.

Theme#

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "target": "w-fit",
  "animation": "transition-opacity",
  "arrow": {
    "base": "absolute z-10 h-2 w-2 rotate-45",
    "style": {
      "dark": "bg-gray-900 dark:bg-gray-700",
      "light": "bg-white",
      "auto": "bg-white dark:bg-gray-700"
    },
    "placement": "-4px"
  },
  "base": "absolute z-10 inline-block rounded-lg px-3 py-2 text-sm font-medium shadow-sm",
  "hidden": "invisible opacity-0",
  "style": {
    "dark": "bg-gray-900 text-white dark:bg-gray-700",
    "light": "border border-gray-200 bg-white text-gray-900",
    "auto": "border border-gray-200 bg-white text-gray-900 dark:border-none dark:bg-gray-700 dark:text-white"
  },
  "content": "relative z-20"
}

References#