React Tooltip - Flowbite

Use the tooltip component to show a descriptive text when hovering over an element such as a button and customize the content and style with React and Tailwind CSS

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:

'use client';

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.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function DefaultTooltip() {
  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.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function TooltipStyles() {
  return (
    <>
      <Tooltip
        content="Tooltip content"
        style="light"
      >
        <Button>
          Light tooltip
        </Button>
      </Tooltip>
      <Tooltip
        content="Tooltip content"
        style="dark"
      >
        <Button>
          Dark tooltip
        </Button>
      </Tooltip>
    </>
  )
}

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.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function Placement() {
  return (
    <>
      <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>
    </>
  )
}

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.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function Triggering() {
  return (
    <>
      <Tooltip
        content="Tooltip content"
        trigger="hover"
      >
        <Button>
          Tooltip hover
        </Button>
      </Tooltip>
      <Tooltip
        content="Tooltip content"
        trigger="click"
      >
        <Button>
          Tooltip click
        </Button>
      </Tooltip>
    </>
  )
}

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.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function Animation() {
  return (
    <>
      <Tooltip
        content="Tooltip content"
      >
        <Button>
          Not animated tooltip
        </Button>
      </Tooltip>
      <Tooltip
        animation="duration-150"
        content="Tooltip content"
      >
        <Button>
          Fast animation
        </Button>
      </Tooltip>
      <Tooltip
        animation="duration-300"
        content="Tooltip content"
      >
        <Button>
          Normal speed animation
        </Button>
      </Tooltip>
      <Tooltip
        animation="duration-500"
        content="Tooltip content"
      >
        <Button>
          Slow animation
        </Button>
      </Tooltip>
      <Tooltip
        animation="duration-1000"
        content="Tooltip content"
      >
        <Button>
          Really slow animation
        </Button>
      </Tooltip>
    </>
  )
}

Disable arrow

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

Edit on GitHub
  • React TypeScript
'use client';

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

export default function DisableArrow() {
  return (
    <Tooltip
      content="Tooltip content"
    >
      <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 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