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

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

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

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

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

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

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

Hover delay#

When your tooltip uses the hover trigger type, use the restMs prop to specify the amount of time (in milliseconds) the user's cursor must be "resting" on the trigger before the tooltip appears.

Use the delay prop as a fallback with restMs to ensure that the tooltip appears after a certain amount of time even if the user's cursor is still moving.

If you want to specify different behavior delay behavior for open and close, you can pass an object to delay that allows both open and close properties.

'use client';

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

function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }} restMs={100}>
        <Button>Delayed tooltip</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" delay={{ open: 1000, close: 200 }}>
        <Button>Delayed tooltip without restMs</Button>
      </Tooltip>
      <Tooltip content="Tooltip content" restMs={500}>
        <Button>Delayed tooltip with restMs only</Button>
      </Tooltip>
    </div>
  );
}

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 inline-block z-10 rounded-lg py-2 px-3 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