Tooltips

Glassy hover bubbles in four placements, with inverse, rich & shortcut variants — every surface is a role token, so all 12 accents retheme for free.

Notifications
Anchoring

Placements

Top, bottom, start & end — hover or focus any trigger. The arrow always points back to its anchor.

Keyboard & pointer accessible
Anchored above
Anchored below
Anchored start
Anchored end
Surface

Variants

Default glass overlay vs. high-contrast inverse bubble.

Frosted surface-overlay
High-contrast bubble
Quick search ⌘K
In context

Icon-only controls

The most common use — a label for icon buttons that lack visible text.

Bold⌘B
Italic⌘I
Insert link⌘K
Move to trash
Content

Rich tooltip

A title plus a line of supporting copy — still hover/focus driven.

AS Ava Sutton Operations Lead · Online now
$748.2K Gross revenue Jul 2025 – Jun 2026 · ▲ 12.4% vs. prior period
No-JS fallback

Native title

Where a styled bubble is overkill, the browser title still works everywhere.

The SSR rollout shipped Tuesday, ahead of the planned date. Hover AOV for the metric definition.

Tip: pair the title attribute with x-tooltip to upgrade it to a styled bubble when Alpine is present.