Overlay

Tooltip

Display contextual information when hovering over a trigger element. Tooltips support text, keyboard shortcuts, arrows, positioning, delay, and custom rich content.

Note: Tooltip requires Tooltip.Provider from bits-ui at the layout level. This is already configured in the app layout — no additional setup is needed.

Playground

Experiment with different props in real-time.

Text

Side

Delay (ms)

Arrow

Disabled

Basic Usage

Use the text prop for simple tooltip content. Place the trigger element as a child.

<script lang="ts">
  import { Tooltip, Button } from 'sv5ui';
</script>

<Tooltip text="Add to library">
  <Button>Hover me</Button>
</Tooltip>

Positions

Control which side the tooltip appears on with the side prop.

<Tooltip text="Top" side="top">
  <Button variant="outline">Top</Button>
</Tooltip>

<Tooltip text="Right" side="right">
  <Button variant="outline">Right</Button>
</Tooltip>

<Tooltip text="Bottom" side="bottom">
  <Button variant="outline">Bottom</Button>
</Tooltip>

<Tooltip text="Left" side="left">
  <Button variant="outline">Left</Button>
</Tooltip>

With Arrow

Add an arrow pointing to the trigger with the arrow prop. Pass an object to customize arrow dimensions.

<Tooltip text="With arrow" arrow>
  <Button>Hover me</Button>
</Tooltip>

<Tooltip text="Custom arrow" arrow={{ width: 12, height: 6 }}>
  <Button variant="outline">Custom arrow</Button>
</Tooltip>

With Keyboard Shortcuts

Display keyboard shortcut hints using the kbds prop.

<Tooltip text="Copy" kbds={['meta', 'c']}>
  <Button>Copy</Button>
</Tooltip>

<Tooltip text="Search" kbds={['meta', 'k']}>
  <Button variant="outline">Search</Button>
</Tooltip>

Custom Content

Use the content snippet for rich tooltip markup instead of plain text.

<Tooltip>
  <Button>Rich tooltip</Button>

  {#snippet content()}
    <div class="flex flex-col gap-1">
      <span class="font-semibold">Custom Content</span>
      <span class="text-xs opacity-70">This tooltip uses the content snippet for rich markup.</span>
    </div>
  {/snippet}
</Tooltip>

Disabled

Prevent the tooltip from appearing with the disabled prop.

<Tooltip text="You won't see me" disabled>
  <Button>Disabled tooltip</Button>
</Tooltip>

Delay Duration

Control how long to wait before showing the tooltip with delayDuration.

<Tooltip text="Instant" delayDuration={0}>
  <Button>No delay</Button>
</Tooltip>

<Tooltip text="Slow" delayDuration={1000}>
  <Button variant="outline">1s delay</Button>
</Tooltip>

UI Slots

Use the ui prop to override classes on specific internal elements of the Tooltip.

Slot	Description
`content`	Outer tooltip container — controls positioning, background, padding, and shadow
`arrow`	Arrow indicator pointing to the trigger — controls size and fill color
`text`	Text content inside the tooltip — controls font size, weight, and color
`kbds`	Keyboard shortcut badges wrapper — controls layout and spacing of kbd elements

Snippets

Use Svelte 5 snippets to customize specific parts of the Tooltip.

Snippet	Type	Description
`children`	`Snippet<[{ open: boolean }]>`	Trigger element — receives tooltip open state
`content`	`Snippet`	Custom rich content inside the tooltip — replaces default text rendering

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the tooltip is visible (bindable)
`text`	`string`	`-`	Text content displayed in the tooltip
`kbds`	`(string \| KbdProps)[]`	`-`	Keyboard shortcut hints shown alongside text
`arrow`	`boolean \| { width?: number; height?: number }`	`false`	Show an arrow pointing to the trigger element
`transition`	`boolean`	`true`	Animate the tooltip open/close transitions
`disabled`	`boolean`	`false`	Prevent the tooltip from appearing
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Which side of the trigger the tooltip appears on
`sideOffset`	`number`	`8`	Distance in pixels between the tooltip and trigger
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment of the tooltip relative to the trigger
`delayDuration`	`number`	`-`	Delay in milliseconds before the tooltip appears
`portal`	`boolean`	`true`	Render the tooltip in a portal
`children`	`Snippet<[{ open: boolean }]>`	`-`	Trigger element that activates the tooltip on hover
`content`	`Snippet`	`-`	Custom rich content to render inside the tooltip
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

Slideover Calendar