Tooltip · astryx-svelte

Usage

A short text hint that appears on hover or focus, anchored to a trigger element. Use it to describe icon-only buttons, show the full text of truncated labels, or provide supplementary context without cluttering the UI.

ts
 
import { Tooltip } from '@astryx-svelte/core';

Best practices

Guidance	Practices
Do	Keep tooltip content concise: aim for under 140 characters of plain text.
Do	Add a tooltip to icon-only buttons and controls that lack a visible label.
Don't	Place interactive elements like links or buttons inside a tooltip; use HoverCard or Popover instead.
Don't	Use tooltips for essential information that users must see to complete a task.

Examples

Common configurations, variations, and states.

Tooltip — Action Bar

Tooltips on an action button bar with contextual descriptions.

Tooltip — Hook Usage

Tooltip using the useTooltip hook for programmatic control.

Tooltip — Inline Text

Tooltips on inline text terms for definitions.