Tooltips

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

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

Setup

<script>
	import { Tooltip } from 'flowbite-svelte';
</script>

Default tooltip example

<script>
import {Tooltip, Button} from 'flowbite-svelte'
</script>

<Button id="default">Default tooltip</Button>
<Tooltip content="Tooltip content" triggeredBy='#default'>
</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>

Disable arrow

<Tooltip content="Tooltip content" arrow={false}>
  <Button>Default tooltip</Button>
</Tooltip>

Custom style

When you want to add custom styles, use style="custom", tipClass, and tipColor to modify the style.

<Tooltip
  content="tooltip content"
  placement="auto"
  tipClass="absolute inline-block rounded-lg p-24 text-lg font-medium shadow-sm text-white"
  style="custom"
  tipColor="bg-red-900 dark:bg-red-700"
>
  <Button>Custom style</Button>
</Tooltip>

Props

The component has the following props, type, and default values. See types page for type information.

Related components

References