React Tooltip - Flowbite

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";

Default tooltip#

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 client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <Tooltip content="Tooltip content">
      <Button>Default tooltip</Button>
    </Tooltip>
  );
}

Tooltip styles#

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

"use client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <div className="flex gap-2">
      <Tooltip content="Tooltip content" style="light">
        <Button>Light tooltip</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" style="dark">
        <Button>Dark tooltip</Button>
      </Tooltip>
    </div>
  );
}

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.

"use client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <div className="flex gap-2">
      <Tooltip content="Tooltip content" placement="top">
        <Button>Tooltip top</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" placement="right">
        <Button>Tooltip right</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" placement="bottom">
        <Button>Tooltip bottom</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" placement="left">
        <Button>Tooltip left</Button>
      </Tooltip>
    </div>
  );
}

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.

"use client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <div className="flex gap-2">
      <Tooltip content="Tooltip content" trigger="hover">
        <Button>Tooltip hover</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" trigger="click">
        <Button>Tooltip click</Button>
      </Tooltip>
    </div>
  );
}

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.

"use client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Tooltip content="Tooltip content" animation={false}>
        <Button>Not animated tooltip</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" animation="duration-150">
        <Button>Fast animation</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" animation="duration-300">
        <Button>Normal speed animation</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" animation="duration-500">
        <Button>Slow animation</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" animation="duration-1000">
        <Button>Really slow animation</Button>
      </Tooltip>
    </div>
  );
}

Disable arrow#

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

"use client";

import { Button, Tooltip } from "flowbite-react";

export function Component() {
  return (
    <Tooltip content="Tooltip content" arrow={false}>
      <Button>Default tooltip</Button>
    </Tooltip>
  );
}

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#

• Flowbite Tooltip