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
Tooltip content
<script>
import {Tooltip, Button} from 'flowbite-svelte'
</script>
<Tooltip content="Tooltip content">
<Button>Default tooltip</Button>
</Tooltip>
Tooltip styles
Tooltip content
Tooltip content
<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
Tooltip content
Tooltip content
<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
<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="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="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.
Name | Type | Default |
---|---|---|
placement | 'auto' | Placement | 'top' |
trigger | 'hover' | 'click' | 'hover' |
style | 'dark' | 'light' | 'auto' | 'custom' | 'dark' |
content | string | '' |
animation | false | `duration-${number}` | 'duration-300' |
arrow | boolean | true |
tipClass | string | 'absolute inline-block rounded-lg py-2 px-3 text-sm font-medium shadow-sm' |
tipColor | string | '' |