Tooltip

Accessible tooltip, melt-inspired: the trigger snippet receives a props object to spread onto YOUR interactive element, so aria-describedby lands on the real trigger.

Shows on hover AND keyboard focus; Escape dismisses. Portalled and flipped: near a viewport edge it takes the opposite side rather than hanging off the screen, and no ancestor can clip it.

Overlays · portalled to <body> · keyboard contract

<script lang="ts">
	import { Tooltip } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
content required	Snippet	—	The tip's text. Keep it short — it cannot hold controls.
trigger required	Snippet<[Record<string, unknown>]>	—	Your element. Spread the props it receives so aria-describedby lands on it.
side	Side	'top'	Preferred side. Flips to the opposite one if it does not fit.
delay	number	150	Delay before it appears on hover, ms. Focus shows it at once.
class	string	—	Merged with the component's own classes, last — so yours win.

Keyboard

Key	Does
Escape	dismiss while the trigger keeps focus

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<script lang="ts">
	import { Tooltip, Button } from '$lib/index.js';
	import { Info } from '@lucide/svelte';
</script>

<div class="p-16">
	<Tooltip>
		{#snippet trigger(props)}
			<Button variant="outline" {...props}><Info />Retention</Button>
		{/snippet}
		{#snippet content()}Snapshots older than the policy are pruned nightly{/snippet}
	</Tooltip>
</div>

Overlays · Dialog · Sheet · Drawer · Popover

---

← All components · Getting started · Theming · source