svelte-kit-vice/src/uix/soma/components/tooltip

Tooltip

A floating label that appears on hover or focus to describe an element. Supports delay groups, positioning, and hoverable content.

Anatomy

<Tooltip.Provider>
	<Tooltip.Trigger>Hover me</Tooltip.Trigger>
	<Tooltip.Content>
		<Tooltip.Arrow />
		Tooltip text
	</Tooltip.Content>
</Tooltip.Provider>

Wrap multiple tooltips in Tooltip.Group to share open delay across a group.

Parts

Part	Element	Description
Group	none	Optional group coordinator. Shares delay state across tooltips.
Provider	none	Root context for a single tooltip. Manages open state and timing.
Trigger	any	Element that triggers the tooltip on hover/focus.
Content	<div>	Floating tooltip panel. Positioned relative to trigger.
Arrow	<div>	Floating arrow pointing toward the trigger.

ARIA

Part	Attribute	Value
Trigger	aria-describedby	ID of Content (when open)
Content	role	tooltip
Content	aria-label	Optional label text

Data Attributes

Part	Attribute	Values
Trigger	data-tooltip-trigger	Always present
Trigger	data-state	closed | delayed-open | instant-open
Content	data-tooltip-content	Always present
Content	data-state	closed | delayed-open | instant-open
Content	data-side	top | right | bottom | left
Content	data-align	start | center | end
Content	data-starting-style	Present during open animation
Content	data-ending-style	Present during close animation

CSS Variables

Variable	Part	Description
--floating-transform-origin	Content	Transform origin based on placement
--floating-available-width	Content	Available width before collision
--floating-available-height	Content	Available height before collision
--floating-anchor-width	Content	Width of the anchor element
--floating-anchor-height	Content	Height of the anchor element

Keyboard

Key	Action
Escape	Close the tooltip
Tab (to trigger)	Open tooltip on focus
Tab (away)	Close tooltip on blur

Tooltips open on pointerenter and focus, close on pointerleave and blur.

Usage

Basic

<script>
	import { Tooltip } from '$soma/components';
</script>

<Tooltip.Provider>
	<Tooltip.Trigger>
		<button>Save</button>
	</Tooltip.Trigger>
	<Tooltip.Content>
		<Tooltip.Arrow />
		Save your changes
	</Tooltip.Content>
</Tooltip.Provider>

With delay group

<Tooltip.Group openDelay={500} closeDelay={0}>
	<Tooltip.Provider>
		<Tooltip.Trigger>A</Tooltip.Trigger>
		<Tooltip.Content>Tooltip A</Tooltip.Content>
	</Tooltip.Provider>

	<Tooltip.Provider>
		<Tooltip.Trigger>B</Tooltip.Trigger>
		<Tooltip.Content>Tooltip B</Tooltip.Content>
	</Tooltip.Provider>
</Tooltip.Group>

Custom positioning

<Tooltip.Content side="right" sideOffset={8}>Positioned to the right</Tooltip.Content>

Non-hoverable content

<Tooltip.Provider disableHoverableContent>
	<!-- Content disappears immediately when pointer leaves trigger -->
</Tooltip.Provider>