React Tooltip - Flowbite

Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element

Flowbite React allows you to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.

Default tooltip

<Tooltip content="Tooltip content">
  <Button>
    Default tooltip
  </Button>
</Tooltip>

Tooltip styles

<Tooltip
  content="Tooltip content"
  style="light"
>
  <Button>
    Light tooltip
  </Button>
</Tooltip>
<Tooltip
  content="Tooltip content"
  style="dark"
>
  <Button>
    Dark tooltip
  </Button>
</Tooltip>

Placement

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

Triggering

<Tooltip
  content="Tooltip content"
  trigger="hover"
>
  <Button>
    Tooltip hover
  </Button>
</Tooltip>
<Tooltip
  content="Tooltip content"
  trigger="click"
>
  <Button>
    Tooltip click
  </Button>
</Tooltip>

Animation

<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

<Tooltip
  content="Tooltip content"
>
  <Button>
    Default tooltip
  </Button>
</Tooltip>