Svelte Tooltip - Flowbite

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 #

  • Svelte
<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.

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

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

Tooltip types #

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 type={light|dark} data attribute.

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

<Button id="type-light">Light tooltip</Button>
<Button id="type-auto">Default tooltip</Button>
<Button id="type-dark">Dark tooltip</Button>
<Tooltip {type} triggeredBy="[id^='type-']" on:show={(ev) => (type = 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.

  • Svelte
<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 #

  • Svelte
<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 #

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

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

External reference #

If you need the tooltip to be attached to the other element then the tiggering one you can pass a CSS query to reference prop.

External reference
  • Svelte
<script>
  import { Tooltip, Button } from 'flowbite-svelte';
  let placement = '';
</script>

<div id="ext-ref" class="p-2 rounded-lg border border-gray-200 dark:border-gray-600">External reference</div>
<div class="space-x-4">
  <Button id="ref-left" on:mouseenter={() => (placement = 'left')}>Left</Button>
  <Button id="ref-top" on:mouseenter={() => (placement = 'top')}>Top</Button>
  <Button id="ref-right" on:mouseenter={() => (placement = 'right')}>Right</Button>
</div>
<Tooltip reference="#ext-ref" triggeredBy="[id^='ref-']" {placement} class="w-64 text-sm font-light">And here's some amazing content. It's very engaging. Right?</Tooltip>

Custom type #

Various color palettes can be set for a tooltip by using the color property from the underlying Frame component. (Setting color prop sets the type to custom implicitly.)

When you want to add a fully custom styles, use type="custom", defaultClass, and class to modify the tooltip styling.

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

<Button>Green tooltip</Button>
<Tooltip color="green">Tooltip content</Tooltip>

<Button>Yellow tooltip</Button>
<Tooltip color="yellow">Tooltip content</Tooltip>

<Button>Custom type</Button>
<Tooltip placement="right" type="custom" defaultClass="" class="p-4 text-lg font-medium bg-purple-500 text-gray-100" arrow={false}>Tooltip content</Tooltip>

Component data #

Tooltip #

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

Props

    Name Type Default
    type 'dark' | 'light' | 'auto' | 'custom' 'dark'
    defaultClass string 'py-2 px-3 text-sm font-medium'

Events

    Names
    on:show

Frame #

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

  • Use the class prop to overwrite the default class.

Props

    Name Type Default
    tag string $$restProps.href ? 'a' : 'div'
    color FrameColor 'default'
    rounded boolean false
    border boolean false
    shadow boolean false
    transition TransitionFunc null_transition
    params object {}
    node HTMLElement | undefined undefined
    use Action<HTMLElement, any> noop
    options string {}
    role string | undefined undefined

Events

    Names
    on:transition
    on:click
    on:mouseenter
    on:mouseleave
    on:focusin
    on:focusout

References #

Toast Typography