Tooltips

Tooltip top

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

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

Disable arrow

Props

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

Related components

References