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
• Adds aria-describedby on the wrapper around the trigger content
• Uses role="tooltip" on the tooltip content
• For custom focusable triggers, put aria-describedby={"#{id}-content"} on the focusable element when the description must be announced reliably
• Note: Critical information should not be placed solely in tooltips