Tooltip

Shared ancestor for one or more Tooltips. Provides common hover-delay timing so that after the first tooltip in the group opens, its neighbours open instantly.

Naming an icon-only control

A tooltip is for something a sighted reader can't infer — most often what an icon button does. It is not a substitute for an accessible name: the button still needs its aria-label, because a tooltip that only appears on hover reaches nobody using a keyboard reader.

<TooltipProvider>
	<Tooltip>
		<TooltipTrigger aria-label="Delete order">
			<Trash2 class="size-4" />
		</TooltipTrigger>
		<TooltipContent>Delete order</TooltipContent>
	</Tooltip>
</TooltipProvider>

Shared delay

TooltipProvider sets one delayDuration for every tooltip beneath it, so a row of icons opens on the same beat instead of each one guessing. A single tooltip can still override it.

<TooltipProvider delayDuration={100}>
	<div class="flex items-center gap-2">
		<Tooltip>
			<TooltipTrigger aria-label="What this measures">
				<Info class="size-4" />
			</TooltipTrigger>
			<TooltipContent side="right">Gross revenue, before refunds.</TooltipContent>
		</Tooltip>
		<Tooltip delayDuration={600}>
			<TooltipTrigger>
				<Button variant="ghost">Slower</Button>
			</TooltipTrigger>
			<TooltipContent>This one waits longer.</TooltipContent>
		</Tooltip>
	</div>
</TooltipProvider>

On a link

The child snippet replaces the default <button> entirely — spread its props onto your own element. Reach for it when the trigger is a destination rather than an action, so the markup stays an <a>.

Patterns

<TooltipProvider>
	<Tooltip>
		<TooltipTrigger>
			{#snippet child({ props })}
				<a {...props} href="/docs/patterns" class="text-primary text-sm underline">
					Patterns
				</a>
			{/snippet}
		</TooltipTrigger>
		<TooltipContent>The rulebook behind every screen.</TooltipContent>
	</Tooltip>
</TooltipProvider>

API

`TooltipProvider`

Shared ancestor for one or more Tooltips. Provides common hover-delay timing so that after the first tooltip in the group opens, its neighbours open instantly.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		The `Tooltip`s sharing this provider.
`delayDuration`	`number`		Default milliseconds to wait after hover before a tooltip opens (forwarded via `...rest`).

`Tooltip`

A tooltip reveals a short, contextual hint when a user hovers or focuses a trigger. Use it for supplementary labels on icon-only controls or brief clarifications — never for essential or interactive content. Opens with a fly-and-scale transition. Anatomy: TooltipProvider (required ancestor sharing hover-delay timing) > Tooltip (root, controls open state) > TooltipTrigger (the hoverable element) + TooltipContent (the floating bubble).

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		The `TooltipTrigger` and `TooltipContent`.
`open` bindable	`boolean`	`false`	Controlled open state of the tooltip. Bindable — omit to let hover/focus drive it automatically.
`delayDuration`	`number`		Milliseconds to wait after hover before the tooltip opens (forwarded via `...rest`); falls back to the value set on `TooltipProvider`.
`disableHoverableContent`	`boolean`		When true the content closes as soon as the pointer leaves the trigger, instead of staying open while hovering the bubble (forwarded via `...rest`).
`disabled`	`boolean`		Disables the tooltip so it never opens (forwarded via `...rest`).

`TooltipTrigger`

The hoverable/focusable element that opens the tooltip.

Prop	Type	Description
`class`	`string`	Additional Tailwind classes merged onto the trigger.
`children`	`import('svelte').Snippet`	The trigger element (e.g. a button or icon), rendered inside the default `<button>`.
`child`	`import('svelte').Snippet<[{props: Record<string, unknown>}]>`	Escape hatch replacing the default `<button>` entirely, e.g. an `<a>` for a navigational trigger. Spread `props` onto your own element.

`TooltipContent`

The floating bubble shown when the tooltip is open, rendered with a fly-and-scale transition.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the bubble.
`children`	`import('svelte').Snippet`		Tooltip content.
`sideOffset`	`number`	`4`	Distance in pixels between the trigger and the bubble.
`side`	`'top'\|'right'\|'bottom'\|'left'`		Preferred side of the trigger to render the bubble on (forwarded via `...rest`).