Tooltip

Position Variants

4 positioning options: top, bottom, left, right. Hover or focus to see tooltips.

<!-- Tooltip positioned above -->
<button class="elv-tooltip-trigger" type="button"
  aria-describedby="tooltip-1" data-tooltip-trigger>
  <svg class="elv-tooltip-icon" viewBox="0 0 16 16">...</svg>
  <div class="elv-tooltip" role="tooltip" id="tooltip-1" data-position="top">
    Helpful information here
  </div>
</button>

With Title

Tooltip with title prefix (Title: text format)

<div class="elv-tooltip" role="tooltip" id="tooltip-1" data-position="top">
  <strong>Title:</strong> Descriptive text goes here
</div>

Custom Icons

Replace default info icon with custom icons

In Context

Common usage patterns

Usage Guidelines

• Content: Keep tooltip text brief (1-2 sentences max). For longer content, use a modal or inline help.
• Positioning: Default to top. Use bottom/left/right when space is constrained or to avoid obscuring content.
• Trigger: Use info icon for supplemental information. Use flag/trash icons for action confirmations.
• Timing: 300ms show delay prevents flickering on cursor movement. No delay on focus (keyboard nav).
• Dismissal: Automatically hides on mouse leave, blur, or Escape key press.
• Mobile: Avoid tooltips on touch devices. Use inline text or tap-to-expand patterns instead.

Accessibility Notes

• ARIA: Always include aria-describedby linking trigger to tooltip ID
• Role: Use role="tooltip" on the tooltip element
• Keyboard: Must be focusable (button/link). Shows on focus, hides on blur or Escape key.
• Screen Readers: Tooltip text announced when trigger receives focus
• Visible Focus: Trigger button has clear focus outline (3px purple ring)
• Required Info: Never put critical information ONLY in tooltips. Tooltips are supplemental.

<button
  class="elv-tooltip-trigger"
  type="button"
  aria-describedby="tooltip-id"
  data-tooltip-trigger>
  <svg class="elv-tooltip-icon">...</svg>
  <div class="elv-tooltip" role="tooltip" id="tooltip-id" data-position="top">
    Helpful supplemental information
  </div>
</button>

Design System Specs