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

Example

Architecture

sc-tooltip-root
Slot: default
sc-tooltip-trigger
Slot: default
sc-tooltip-portal
Slot: default
sc-tooltip-content
Slot: default Place your actual content here.
sc-tooltip-arrow
Slot: default You can place an arrow here.

Reference

  • Root

    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

      • delay-duration
        number
        /
        default: 700

        The duration in milliseconds to wait before showing the tooltip when the trigger is hovered or focused.

      • 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.

      • disabled
        boolean
        /
        default: false

        If true, the tooltip is disabled and will not show.

      • 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.

  • Trigger

    The container element that triggers the tooltip. Wraps the element that will show the tooltip when interacted with, managing hover, focus, and long-press interactions.

    • Attributes

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

  • Portal

    Renders the tooltip content into a designated location in the DOM. When using fixed positioning, renders into the CSS top layer to ensure proper stacking context.

    • Attributes

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

      • position
        enum
        /
        default: absolute

        Determines how the tooltip content will be placed on the page. When set to fixed, the content is placed in the CSS top layer, ensuring proper stacking context and visibility above other page elements.

  • Content

    The container that holds the tooltip content. Manages positioning behavior and implements proper ARIA attributes for accessibility.

    • Attributes

      • align
        enum
        /
        default: center

        The preferred alignment against the trigger element. May adjust automatically when collisions occur.

      • align-offset
        number
        /
        default: 0

        The offset in pixels from the alignment position.

      • aria-label
        string
        /
        default: -

        Accessible label for the tooltip content when a visible label is not present.

      • aria-labelled-by
        string
        /
        default: -

        References the ID of the element that labels the tooltip content.

      • arrow-padding
        number
        /
        default: 0

        The padding between the arrow and the edges of the content. Prevents arrow overflow with rounded corners.

      • avoid-collisions
        boolean
        /
        default: true

        When true, automatically adjusts positioning to prevent collisions with viewport boundaries.

      • collision-padding
        number
        /
        default: 0

        The distance in pixels from viewport edges where collision detection should occur.

      • hide-when-detached
        boolean
        /
        default: false

        When true, hides the content when the trigger element becomes fully obscured.

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying container for DOM manipulation.

      • side
        enum
        /
        default: bottom

        The preferred side where the tooltip should appear relative to its trigger.

      • side-offset
        number
        /
        default: 0

        The distance in pixels between the tooltip and its trigger element.

    • Events

      • onClickOutside

        Event handler called when a click occurs outside the tooltip content.

      • onCloseTransitionEnd

        Event handler called when the closing transition completes.

      • onEscapeKeydown

        Event handler called when the Escape key is pressed while the tooltip is active.

      • onOpenTransitionEnd

        Event handler called when the opening transition completes.

    • Classes

      • bottom

        Applied when the tooltip content is positioned at the bottom of the trigger.

      • bottom-in

        Applied when content is positioned at the bottom during the opening transition.

      • bottom-out

        Applied when content is positioned at the bottom during the closing transition.

      • close-transition

        Applied during the closing transition of the tooltip.

      • left

        Applied when the tooltip content is positioned to the left of the trigger.

      • left-in

        Applied when content is positioned on the left side during the opening transition.

      • left-out

        Applied when content is positioned on the left side during the closing transition.

      • open

        Applied when the tooltip is in an open state.

      • open-transition

        Applied during the opening transition of the tooltip.

      • right

        Applied when the tooltip content is positioned to the right of the trigger.

      • right-in

        Applied when content is positioned on the right side during the opening transition.

      • right-out

        Applied when content is positioned on the right side during the closing transition.

      • top

        Applied when the tooltip content is positioned at the top of the trigger.

      • top-in

        Applied when content is positioned at the top during the opening transition.

      • top-out

        Applied when content is positioned at the top during the closing transition.

  • Arrow

    An optional visual indicator that points to the trigger element. Must be rendered inside sc-tooltip-content. Helps visually connect the tooltip with its trigger.

    • Attributes

      • id
        string
        /
        default: -

        ID that is forwarded to the underlying element for DOM manipulation.

    • Classes

      • bottom

        Applied when the arrow is positioned at the bottom of the tooltip.

      • left

        Applied when the arrow is positioned on the left side of the tooltip.

      • right

        Applied when the arrow is positioned on the right side of the tooltip.

      • top

        Applied when the arrow is positioned at the top of the tooltip.

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