Skip to content
7 Seventh UI VanillaJS Runtime playground

Component runtime

Tooltip

Tooltip enhances Seventh UI tooltip markup with trigger relationships, delayed hover and focus display, Escape dismissal, cancellable lifecycle events, reduced-motion timing, and cleanup.

Playground

Hover or focus the button. The runtime shows the tooltip after the configured delay and hides it on pointer leave, blur, or Escape.

Top
Right
Bottom
Left

Hooks

Tooltip behavior initializes on the trigger. The content can be referenced explicitly or through an existing description relationship.

Hook Role
data-sui-tooltip Trigger initialized by the component registry. A non-empty value can point to a tooltip id or selector.
data-sui-trigger="tooltip" Alternative trigger hook for explicit component naming.
data-sui-target Tooltip id or selector resolved before other relationship strategies.
aria-describedby Existing description relationship reused when it points at tooltip content.
role="tooltip" or data-sui-tooltip-content Tooltip content whose hidden state and data-sui-state are synchronized.
data-sui-show-delay / data-sui-hide-delay Optional trigger timing in milliseconds. Reduced-motion users receive zero-delay behavior.

Events

Before events are cancellable. After events fire only when state actually changes.

sui:tooltip:before-show
sui:tooltip:show
sui:tooltip:before-hide
sui:tooltip:hide

Markup

<button
  data-sui-tooltip
  data-sui-target="save-tooltip"
  data-sui-show-delay="150"
>
  Save changes
</button>

<div class="sui-tooltip" id="save-tooltip" data-sui-tooltip-content hidden>
  Saves run after validation.
</div>