Tooltip

A small pop-up text box that appears on hover or focus to provide additional information, guidance or context without cluttering the interface.

The tooltip itself can be hovered without closing.


<script lang="ts">
  import Tooltip from "$lib/components/tooltip/tooltip.svelte";

  let active = $state(false);
</script>

<label class="flex items-center gap-2">
  open tooltip
  <input id="checkbox" type="checkbox" bind:checked={active} />
</label>

<div class="flex justify-center">
  <Tooltip bind:active position="bottom">
    Chocolate Truffe*
    {#snippet target()}
      <span class="max-w-sm text-sm leading-tight">
        A decadent treat made with a ganache center coated in cocoa powder, nuts, or more chocolate.
      </span>
    {/snippet}
  </Tooltip>
</div>
show
{active}

open tooltip

Chocolate Truffe*

show false

Headless component

The headless component is just a Hocusable. The active option is bindable.

Adheres to the WAI ARIA Tooltip pattern