Tooltip

A small popup that displays helpful information through an attachment on a target element.

Hover HERE

Usage

Apply via the tooltip attachment; the renderer auto-mounts (never place manually).

Svelte

<button {@attach tooltip({ text: "Hint" })}>Hover</button>

Anatomy

The internal renderer auto-mounts to document.body on first hover or touch long-press; do not place it manually. Pointer devices show on hover, while touch devices show after holding for delay ms and hide on release or scroll.

Svelte

<div class="whole" role="tooltip">
  {#if content}
    {content(text, variant, flipped)}
  {:else}
    {text}
  {/if}
</div>

Props

Name	Type	Default	Description
`text`	`string`	-	Tooltip text and accessible description for the target element
`content`	`Snippet`	-	Custom tooltip snippet receiving text, variant, and flipped state; replaces the default text renderer
`position`	`Position`	`"top"`	Display position relative to the target element
`align`	`Align`	`"center"`	Tooltip alignment relative to the target element
`offset`	`Vector`	`{ x: 0, y: 0 }`	Offset from the default position
`delay`	`number`	`1000`	Time in milliseconds before the tooltip appears; `0` is immediate and a negative value falls back to `1000`
`cursor`	`boolean`	`false`	Whether the tooltip follows cursor movement on pointer devices
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Tooltip variant

Styling

To learn more, see Styling.

Variant Management

No automatic switching.

Default Class Name

svs-tooltip

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Trigger element: aria-description set to the tooltip text when text is a non-empty string.
Tooltip (whole <div>): role="tooltip".

Exports

Types

TypeScript

type Vector = { x: number; y: number };
type Position = "top" | "right" | "bottom" | "left";
type Align = "start" | "center" | "end";
interface TooltipParams {
  text?: string;
  content?: Snippet<[string, SVSVariant, boolean]>; // Snippet<[text, variant, flipped]>
  position?: Position; // ("top")
  align?: Align; // ("center")
  offset?: Vector; // ({ x: 0, y: 0 })
  delay?: number; // (1000; 0 = immediate, negative = 1000)
  cursor?: boolean; // (false)
  styling?: SVSClass;
  variant?: SVSVariant; // (VARIANT.NEUTRAL)
}
type TooltipDefaults = Omit<TooltipParams, "text" | "content">;

Others

TypeScript

// Attachment factory for standard HTML elements (`{@attach tooltip(params)}`)
// and SvSeeds components (`attach={tooltip(params)}`).
function tooltip(params: TooltipParams): Attachment<HTMLElement>;

// Sets library-wide defaults. Callable repeatedly; last call wins per key.
function initTooltip(defaults: Partial<TooltipDefaults>): void;

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Hover HERE

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like