Tooltip

A tooltip displays contextual information when hovering over or focusing on an element.

Anatomy

<script>
  import { Tooltip } from "@saas-ui/svelte/components/tooltip";
</script>

<Tooltip content="Tooltip text">
  <Button>Hover me</Button>
</Tooltip>

Examples

Arrow Accessibility

Use showArrow to display an arrow pointing to the trigger.

<Centre class="p-8">
	<Tooltip content="I have an arrow!" showArrow>
		<Button variant="outline">Hover me</Button>
	</Tooltip>
</Centre>

Basic Accessibility

Basic tooltip on hover.

<Centre class="p-8">
	<Tooltip content="This is a tooltip">
		<Button variant="outline">Hover me</Button>
	</Tooltip>
</Centre>

Custom Content Accessibility

Use the trigger and children snippets for custom content.

<Centre class="p-8">
	<Tooltip>
		{#snippet trigger()}
			<Button
				variant="outline"
				size="sm"
				icon
				aria-label="Search query help"
			>
				<Icon as={Question} />
			</Button>
		{/snippet}
		<HStack align="center" gap={2}>
			<Icon as={Info} size="xs" />
			<Text as="span">Search query info</Text>
		</HStack>
	</Tooltip>
</Centre>

Delays Accessibility

Use openDelay to add a delay before showing.

<Centre class="p-8">
	<HStack align="center" justify="center" gap={4}>
		<Tooltip content="Instant tooltip" openDelay={0} showArrow>
			<Button variant="ghost">Instant</Button>
		</Tooltip>
		<Tooltip
			content="Delayed tooltip (700ms)"
			openDelay={700}
			showArrow>
			<Button variant="ghost">Delayed</Button>
		</Tooltip>
	</HStack>
</Centre>

Disabled Accessibility

Use disabled to prevent the tooltip from showing.

<Centre class="p-8">
	<HStack align="center" justify="center" gap={4}>
		<Tooltip content="This tooltip is disabled" disabled showArrow>
			<Button variant="outline">Hover me (disabled)</Button>
		</Tooltip>
		<Tooltip content="This tooltip works" showArrow>
			<Button variant="outline">Hover me (enabled)</Button>
		</Tooltip>
	</HStack>
</Centre>

Interactive Accessibility

Use interactive to allow hovering over the tooltip content.

<Centre class="p-8">
	<Tooltip interactive showArrow>
		{#snippet trigger()}
			<Button variant="outline">Hover me</Button>
		{/snippet}
		<VStack gap={1}>
			<Text as="span" class="font-semibold">Interactive tooltip</Text>
			<Text as="span" size="xs" class="opacity-80"
				>You can hover over me!</Text>
		</VStack>
	</Tooltip>
</Centre>

Inverted Accessibility

Use variant="inverted" for a dark tooltip (inverted from the default light panel style).

<Centre class="p-8">
	<Tooltip content="Dark tooltip (inverted)" variant="inverted" showArrow>
		<Button variant="outline">Hover me</Button>
	</Tooltip>
</Centre>

Offset Accessibility

Use custom offset for precise positioning.

<Centre class="p-8">
	<HStack align="center" justify="center" gap={4}>
		<Tooltip content="Default offset" showArrow>
			<Button variant="outline" size="sm">Default</Button>
		</Tooltip>
		<Tooltip
			content="Custom offset (16px)"
			positioning={{ offset: { mainAxis: 16, crossAxis: 4 } }}
			showArrow>
			<Button variant="outline" size="sm">Custom offset</Button>
		</Tooltip>
	</HStack>
</Centre>

Placements Accessibility

Use the positioning prop to control placement.

<VStack align="center" gap={4} class="p-8">
	<HStack gap={4}>
		<Tooltip
			content="Tooltip top"
			positioning={{ placement: "top" }}
			showArrow>
			<Button variant="outline" size="sm">Top</Button>
		</Tooltip>
		<Tooltip
			content="Tooltip bottom"
			positioning={{ placement: "bottom" }}
			showArrow>
			<Button variant="outline" size="sm">Bottom</Button>
		</Tooltip>
		<Tooltip
			content="Tooltip left"
			positioning={{ placement: "left" }}
			showArrow>
			<Button variant="outline" size="sm">Left</Button>
		</Tooltip>
		<Tooltip
			content="Tooltip right"
			positioning={{ placement: "right" }}
			showArrow>
			<Button variant="outline" size="sm">Right</Button>
		</Tooltip>
	</HStack>
</VStack>

Props

A composed tooltip component that handles trigger, positioning, and content display.

Prop	Type	Default	Description
`id`	`string`	`auto-generated`	The unique identifier for the tooltip. If not provided, a unique ID will be auto-generated.
`content`	`string \| Snippet`	`-`	The text content of the tooltip. Can be a string, snippet, or use children when trigger prop is provided.
`children`	`Snippet`	`-`	The trigger element (default usage). When trigger prop is provided, children become the content instead.
`trigger`	`Snippet`	`-`	Alternative trigger element. When provided, children become the content.
`showArrow`	`boolean`	`false`	Whether to show an arrow pointing to the trigger element.
`variant`	`"default" \| "inverted"`	`"default"`	The visual style of the tooltip.
`openDelay`	`number`	`0`	The delay before the tooltip opens (in ms).
`closeDelay`	`number`	`100`	The delay before the tooltip closes (in ms).
`positioning`	`TooltipRootProps['positioning']`	`{ placement: "bottom", strategy: "fixed" }`	The positioning options for the tooltip.
`interactive`	`boolean`	`false`	Whether the tooltip content is interactive (can be hovered/clicked).
`closeOnPointerDown`	`boolean`	`true`	Whether to close the tooltip when the trigger is clicked.
`disabled`	`boolean`	`false`	Whether the tooltip is disabled.
`class`	`string`	`-`	Additional CSS classes to apply.