Tooltip

A component that displays informative text when users hover over, focus on or long-press an element. Implements proper ARIA attributes to ensure the content is accessible to screen readers and keyboard users.

Opens when the trigger is focused or hovered or on long press

Closes when the trigger is activated or when pressing Escape

Supports custom timing for opening delay

Architecture

so-tooltip
Slot: trigger
Slot: content
so-tooltip-text
Slot: default

Reference

  • Tooltip

    The root container that manages the state and behavior of the tooltip system. Coordinates the interaction between trigger and content components, handling timing and positioning.

    • Attributes

      • disable-hoverable-content
        boolean
        /
        default: false

        When true, prevents the tooltip from staying open when hovering over its content. Note that disabling this behavior may impact accessibility for users who need more time to read or interact with the tooltip.

      • open
        boolean
        /
        default: -

        The controlled open state of the tooltip. Must be used in conjunction with onOpenChange event handler.

    • Events

      • onOpenChange

        Event handler called when the open state of the tooltip changes.

  • Text

    The container for the tooltip's text content. Manages the presentation and styling of the informational text displayed when the tooltip is active.

Keyboard

  • Tab

    When focus moves to the trigger, opens the tooltip. When focus leaves the trigger, closes the tooltip.

  • Space

    When the tooltip is open, closes it and activates the trigger element.

  • Enter

    When the tooltip is open, closes it and activates the trigger element.

  • Escape

    When the tooltip is open, closes it and maintains focus on the trigger element.

made for toddle