SutraUI.Tooltip (Sutra UI v0.2.0)

View Source

A popup that displays information related to an element when hovered.

Supports dynamic positioning that automatically adjusts based on viewport boundaries to prevent the tooltip from being clipped.

Examples

<.tooltip id="add-btn-tip" tooltip="Add to library">
  <button class="btn">Hover me</button>
</.tooltip>

<.tooltip id="right-tip" tooltip="Right side tooltip" side="right">
  <button class="btn">Right</button>
</.tooltip>

<.tooltip id="auto-tip" tooltip="Auto-positions based on space" side="auto">
  <button class="btn">Smart Position</button>
</.tooltip>

Accessibility

  • The tooltip is triggered by both hover and keyboard focus
  • Uses aria-describedby to associate the tooltip with the trigger element
  • Uses role="tooltip" on the tooltip content
  • Screen readers announce the tooltip content when focus enters the trigger
  • Note: Critical information should not be placed solely in tooltips

Summary

Functions

tooltip(assigns)

Renders a tooltip component.

Functions

tooltip(assigns)

Renders a tooltip component.

Attributes

  • id (:string) (required) - Unique identifier for the tooltip.
  • tooltip (:string) (required) - The text content to display in the tooltip.
  • side (:string) - The side to position the tooltip (auto for dynamic positioning). Defaults to "auto". Must be one of "top", "bottom", "left", "right", or "auto".
  • align (:string) - The alignment of the tooltip. Defaults to "center". Must be one of "start", "center", or "end".
  • class (:string) - Additional CSS classes. Defaults to nil.
  • Global attributes are accepted. Additional HTML attributes.

Slots

  • inner_block (required) - The element that triggers the tooltip on hover.