Tooltip

Floating label with 8 placements, auto-flip, arrow, configurable delay, and snippet content support.

Import

ts 
import Tooltip from '$lib/components/Tooltip.svelte';

Usage

svelte 
<Tooltip content="Hello!" placement="top">
  <Button>Hover me</Button>
</Tooltip>

Placements

Top, bottom, left, right plus start/end variants.

hover
svelte 
<Tooltip content="top-start" placement="top-start">
  <Button variant="secondary" size="sm">top-start</Button>
</Tooltip>
<Tooltip content="top" placement="top">
  <Button variant="secondary" size="sm">top</Button>
</Tooltip>
<Tooltip content="bottom" placement="bottom">
  <Button variant="secondary" size="sm">bottom</Button>
</Tooltip>

Content

String or snippet content with icon, emphasis, and multi-line layouts.

svelte 
<Tooltip placement="top">
  {#snippet content()}
    <span class="flex items-center gap-1.5">
      <svg .../>
      <span>Shortcut: <strong>Cmd K</strong></span>
    </span>
  {/snippet}
  <Button variant="secondary">Snippet</Button>
</Tooltip>

Delay

Show immediately, with the default delay, or with a slower delay.

svelte 
<Tooltip content="Instant" placement="top" delay={0}>
  <Button variant="secondary">0ms</Button>
</Tooltip>
<Tooltip content="Default delay" placement="top" delay={300}>
  <Button variant="secondary">300ms</Button>
</Tooltip>

Disabled

disabled=true prevents the tooltip from opening.

svelte 
<Tooltip content="This does not appear" placement="top" disabled={true}>
  <Button disabled>Disabled</Button>
</Tooltip>

Icon Buttons

Tooltip labels for icon-only actions.

API Reference

PropTypeDefaultDescription
content string | Snippet—Tooltip text or rich snippet content to display.
placement 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right''top'Preferred placement of the tooltip relative to the trigger.
delay number300Milliseconds before the tooltip appears on hover.
offset number8Distance in pixels between the tooltip and the trigger element.
disabled booleanfalseWhen true, prevents the tooltip from opening.
children Snippet—The trigger element that the tooltip is attached to.