Quill docs

Tooltip

A tooltip: a trigger permanently aria-describedby a role=tooltip bubble, per the WAI-ARIA APG pattern. The bubble is hidden until the trigger is hovered or focused (with a short delay); the description is always available to assistive tech via the describedby link.

Live demo#

Hover over (or tab to) the "Hover me" trigger — the bubble reveals after a short delay and hides when you leave. With JavaScript off, the description is still announced on focus.

Theme it#

Flip the component axes for this preview alone — the controls re-point scoped design tokens on the demo stage and the component itself restyles. Variant controls swap the component class, surface controls change the visual treatment, and motion controls change the interaction feel without leaking to the page.

Density

Radius

Surface

Motion

// This demo is scoped: these axes apply only to this preview.
el("div")
    .attr("data-q-size", "cozy")
    .attr("data-q-radius", "rounded")
    .attr("data-q-surface", "flat")
    .attr("data-q-motion", "smooth")
    .child(
        Tooltip::new("Helpful hint").island("demo-island")
    )

Code#

Construct the component with its builder:

Tooltip::new(
    "save-hint",
    "Hover me",
    "Tooltips reveal on hover or focus, after a short delay.",
)
.island("save-hint-island")