Components

Tooltip

Displays concise contextual information on hover, keyboard focus, or touch-friendly tap.

Preview

tooltip.demo.svelte

<script lang="ts">	import { Tooltip } from '$lib/components/ui/tooltip';</script><Tooltip content="Hello! This works with hover, keyboard focus, and touch." class="rounded-lg">	<button		class="min-h-11 rounded-lg border border-border bg-muted px-6 py-3 text-lg font-semibold shadow-sm"	>		Hover or tap me	</button></Tooltip>

More examples

Placement

Position the tooltip on any side while collision handling keeps it inside the viewport.

tooltip-placements.demo.svelte

<script lang="ts">	import { Tooltip, type TooltipSide } from '$lib/components/ui/tooltip';	const sides: TooltipSide[] = ['top', 'right', 'bottom', 'left'];</script><div class="flex w-full flex-wrap items-center justify-center gap-8 py-8">	{#each sides as side (side)}		<Tooltip content={`${side} tooltip`} {side}>			<button				class="min-h-11 min-w-24 rounded-md border border-border bg-background px-4 shadow-sm"			>				{side}			</button>		</Tooltip>	{/each}</div>

Rich content

Use a snippet for concise formatted content while preserving tooltip semantics.

tooltip-content.demo.svelte

<script lang="ts">	import { Tooltip } from '$lib/components/ui/tooltip';</script><Tooltip side="bottom">	{#snippet content()}		<div class="space-y-1 py-0.5">			<p class="font-semibold">Keyboard shortcut</p>			<p class="text-background/75">Press ⌘ K to open search.</p>		</div>	{/snippet}	<button		aria-label="Search help"		class="grid size-11 place-items-center rounded-full border border-border bg-background text-lg shadow-sm"	>		?	</button></Tooltip>

Installation

Install directly from the hosted registry with the shadcn-svelte CLI.

Terminal

npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/tooltip.json

Terminal

pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/tooltip.json

Terminal

yarn dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/tooltip.json

Terminal

bun x shadcn-svelte@latest add https://ui.akcodeworks.com/r/tooltip.json

Usage

Wrap a single control or element and pass content as text or a snippet. The tooltip opens on pointer hover and keyboard focus, toggles on touch tap, closes on outside interaction or Escape, avoids viewport edges, and keeps a mobile-safe maximum width. Keep tooltip content concise and non-interactive; use a popover for buttons or form controls.

API reference

Prop	Type	Default	Description
content	string \| Snippet	required	Content displayed inside the floating surface.
open	boolean	false	Controls whether the interactive surface is open.
side	top \| right \| bottom \| left	top	Preferred side of the trigger where content appears.
align	start \| center \| end	center	Alignment of floating content relative to its trigger.
sideOffset	number	8	Distance in pixels between the trigger and floating content.
delayDuration	number	300	Delay before the floating content opens in milliseconds.
tapToOpen	boolean	true	Allows touch users to open the tooltip with a tap.
showArrow	boolean	true	Shows the arrow pointing toward the trigger.
disabled	boolean	false	Prevents interaction when enabled.
class	string	—	Tailwind CSS classes applied to the component root.
contentClass	string	—	Tailwind CSS classes applied to the content.
children	Snippet	required	Content rendered inside the component.

Source

These files are included in the registry item and copied into the consuming project.

tooltip.svelte

<script lang="ts" module>	export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';	export type TooltipAlign = 'start' | 'center' | 'end';</script><script lang="ts">	import type { Snippet } from 'svelte';	import { Tooltip as TooltipPrimitive } from 'bits-ui';	import { cn } from '$lib/utils.js';	type TooltipProps = {		children: Snippet;		content: string | Snippet;		open?: boolean;		onOpenChange?: (open: boolean) => void;		side?: TooltipSide;		align?: TooltipAlign;		sideOffset?: number;		delayDuration?: number;		disabled?: boolean;		tapToOpen?: boolean;		showArrow?: boolean;		class?: string;		contentClass?: string;	};	let {		children,		content,		open = $bindable(false),		onOpenChange,		side = 'top',		align = 'center',		sideOffset = 8,		delayDuration = 300,		disabled = false,		tapToOpen = true,		showArrow = true,		class: className,		contentClass	}: TooltipProps = $props();	function handleOpenChange(nextOpen: boolean) {		open = nextOpen;		onOpenChange?.(nextOpen);	}	function handlePointerDown(event: PointerEvent) {		if (!tapToOpen || disabled || event.pointerType === 'mouse') return;		open = !open;		onOpenChange?.(open);	}</script><TooltipPrimitive.Provider {delayDuration} {disabled} disableCloseOnTriggerClick={tapToOpen}>	<TooltipPrimitive.Root		bind:open		{delayDuration}		{disabled}		disableCloseOnTriggerClick={tapToOpen}		onOpenChange={handleOpenChange}	>		<TooltipPrimitive.Trigger>			{#snippet child({ props })}				<span					{...props}					onpointerdown={handlePointerDown}					class={cn(						'inline-flex max-w-full touch-manipulation rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none',						className					)}				>					{@render children()}				</span>			{/snippet}		</TooltipPrimitive.Trigger>		<TooltipPrimitive.Portal>			<TooltipPrimitive.Content				{side}				{align}				{sideOffset}				collisionPadding={12}				sticky="always"				class={cn(					'z-50 max-w-[min(20rem,calc(100vw-2rem))] rounded-md bg-foreground px-3 py-1.5 text-xs leading-relaxed text-background shadow-md outline-none',					contentClass				)}			>				{#if typeof content === 'string'}					{content}				{:else}					{@render content()}				{/if}				{#if showArrow}					<TooltipPrimitive.Arrow class="fill-foreground" />				{/if}			</TooltipPrimitive.Content>		</TooltipPrimitive.Portal>	</TooltipPrimitive.Root></TooltipPrimitive.Provider>

index.ts

export { default as Tooltip } from './tooltip.svelte';export type { TooltipAlign, TooltipSide } from './tooltip.svelte';