Svelte Tooltip - Flowbite

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

Tooltip: View Source Code

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

To get started with using tooltips all you need to do is set triggeredBy attribute of the tooltip component to any CSS query targeting trigger element(s). In the following example you can see the tooltip that will be trigger by the tooltip-default element to be shown when hovered or focused.

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

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

Tooltip styles

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the style={light|dark} data attribute.

<script>
  import { Tooltip, Button } from 'flowbite-svelte';
  let style = 'dark';
</script>

<Button id="style-light">Light tooltip</Button>
<Button id="style-auto">Default tooltip</Button>
<Button id="style-dark">Dark tooltip</Button>
<Tooltip {style} triggeredBy="[id^='style-']" on:show={ev => style = ev.target.id.split('-')[1]}>Tooltip content</Tooltip>

Placement

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the placement={top|right|bottom|left} attribute.

Note! This examples shows you also how to share one tooltip between multiple triggering elements using advanced CSS query.

<script>
  import { Tooltip, Button } from 'flowbite-svelte';
  let placement = 'left';
</script>

<Button id="placement-left">Tooltip left</Button>
<Button id="placement-top">Tooltip top</Button>
<Button id="placement-bottom">Tooltip bottom</Button>
<Button id="placement-right">Tooltip right</Button>
<Tooltip triggeredBy="[id^='placement-']" {placement} on:show={(e)=> [, placement] = e.target.id.split('-')}>
  Tooltip content - {placement}
</Tooltip>

Triggering 

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

<Button id="hover">Tooltip hover</Button>
<Button id="click">Tooltip click</Button>
<Tooltip triggeredBy="#hover">Hover tooltip content</Tooltip>
<Tooltip trigger="click" triggeredBy="#click">Click tooltip content</Tooltip>

Disable arrow 

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

<Button id="disable-arrow">Default tooltip</Button>
<Tooltip arrow={false} triggeredBy='#disable-arrow'>Tooltip content</Tooltip>

Custom style

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

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

<Button id="custom">Custom style</Button>
<Tooltip
  triggeredBy="#custom"
  placement="auto"
  style="custom"
  tipClass=""
  class="p-24 text-lg font-medium text-white"
  color='green'
>
  Tooltip content
</Tooltip>

Props

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

Name Type Default
color string 'custom'
style 'dark' | 'light' | 'auto' | 'custom' 'auto'
tipClass string 'py-2 px-3 text-sm font-medium'

References

Flowbite Tooltip