Skip to content

tooltip.md

Latest commit

 

History

History
60 lines (40 loc) · 1.88 KB

tooltip.md

File metadata and controls

60 lines (40 loc) · 1.88 KB
Raw

Tooltip & Popover

tooltip -- Show a Tooltip on Hover/Focus

<!-- Basic tooltip -->
<button tooltip="Save your changes">Save</button>

<!-- Positioned below -->
<button tooltip="More options" tooltip-position="bottom">Menu</button>

<!-- Custom delay (500ms) -->
<button tooltip="Delete this item" tooltip-delay="500">Delete</button>

<!-- Tooltip on an icon -->
<span tooltip="Notifications" tooltip-position="right">&#x1F514;</span>

Tooltip Attributes

Attribute Type Default Description
tooltip string required The text content displayed in the tooltip
tooltip-position "top" | "bottom" | "left" | "right" "top" Placement relative to the trigger element
tooltip-delay number (ms) 300 Delay in milliseconds before the tooltip appears
tooltip-disabled expression — Reactive boolean expression. When truthy, prevents tooltip from showing

CSS Classes

Class When Applied
.nojs-tooltip On the generated tooltip element (injected via <style data-nojs-tooltip>)

Override in your own stylesheet to customize appearance (background, color, padding, border-radius, etc.).

Accessibility

  • role="tooltip" on the tooltip element
  • aria-hidden="true/false" reflecting visibility state
  • aria-describedby on the trigger, pointing to the tooltip id
  • Escape dismisses a visible tooltip when the trigger has focus
  • Tooltips show on focusin and hide on focusout, making them keyboard-accessible

Positioning

Tooltips are positioned using viewport-aware calculations:

  1. Placed relative to the trigger based on the tooltip-position attribute
  2. An 8px gap separates the tooltip from the trigger
  3. The position is clamped to keep a 4px margin from viewport edges

Next: Popover -->