Tooltip

Contextual hints that appear on hover or focus. Useful for icon explanations, abbreviations, and additional context without cluttering the UI.

Basic Example

Wrap any element in a .focus-tooltip container and add the tooltip content.

HTML

<span class="focus-tooltip">
  <button class="focus-btn focus-btn-primary">Hover me</button>
  <span class="focus-tooltip-content">This is a tooltip!</span>
</span>

Positions

Position the tooltip on any side: top (default), bottom, left, or right.

HTML

<span class="focus-tooltip focus-tooltip-top">
  <button class="focus-btn focus-btn-secondary">Top</button>
  <span class="focus-tooltip-content">Top tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-bottom">
  <button class="focus-btn focus-btn-secondary">Bottom</button>
  <span class="focus-tooltip-content">Bottom tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-left">
  <button class="focus-btn focus-btn-secondary">Left</button>
  <span class="focus-tooltip-content">Left tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-right">
  <button class="focus-btn focus-btn-secondary">Right</button>
  <span class="focus-tooltip-content">Right tooltip</span>
</span>

Color Variants

Semantic colors for different contexts.

HTML

<span class="focus-tooltip">
  <button class="focus-btn focus-btn-outline-secondary">Dark (default)</button>
  <span class="focus-tooltip-content">Default dark tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-light">
  <button class="focus-btn focus-btn-outline-secondary">Light</button>
  <span class="focus-tooltip-content">Light tooltip with border</span>
</span>

<span class="focus-tooltip focus-tooltip-primary">
  <button class="focus-btn focus-btn-outline-secondary">Primary</button>
  <span class="focus-tooltip-content">Primary blue tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-success">
  <button class="focus-btn focus-btn-outline-secondary">Success</button>
  <span class="focus-tooltip-content">Success tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-warning">
  <button class="focus-btn focus-btn-outline-secondary">Warning</button>
  <span class="focus-tooltip-content">Warning tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-danger">
  <button class="focus-btn focus-btn-outline-secondary">Danger</button>
  <span class="focus-tooltip-content">Danger tooltip</span>
</span>

Size Variants

Small and large sizes for different contexts.

HTML

<span class="focus-tooltip focus-tooltip-sm">
  <button class="focus-btn focus-btn-secondary focus-btn-sm">Small</button>
  <span class="focus-tooltip-content">Small tooltip</span>
</span>

<span class="focus-tooltip">
  <button class="focus-btn focus-btn-secondary">Default</button>
  <span class="focus-tooltip-content">Default tooltip</span>
</span>

<span class="focus-tooltip focus-tooltip-lg">
  <button class="focus-btn focus-btn-secondary focus-btn-lg">Large</button>
  <span class="focus-tooltip-content">Large tooltip</span>
</span>

Multiline Tooltips

For longer content, use .focus-tooltip-multiline to allow text wrapping.

HTML

<span class="focus-tooltip focus-tooltip-multiline">
  <button class="focus-btn focus-btn-primary">Hover for details</button>
  <span class="focus-tooltip-content">This is a longer tooltip that wraps to multiple lines. It's useful for providing more detailed information without cluttering the interface.</span>
</span>

Common Use Cases

Icon Buttons

Explain icon-only buttons with tooltips.

HTML

<span class="focus-tooltip">
  <button class="focus-btn focus-btn-secondary"><i class="fa fa-edit"></i></button>
  <span class="focus-tooltip-content">Edit</span>
</span>

<span class="focus-tooltip">
  <button class="focus-btn focus-btn-secondary"><i class="fa fa-copy"></i></button>
  <span class="focus-tooltip-content">Copy to clipboard</span>
</span>

Abbreviations

Explain abbreviations or technical terms.

The server response time was TTFB Time To First Byte of 120ms with a CDN Content Delivery Network cache hit.

HTML

<span class="focus-tooltip focus-tooltip-bottom">
  <abbr style="text-decoration: underline dotted; cursor: help;">TTFB</abbr>
  <span class="focus-tooltip-content">Time To First Byte</span>
</span>

Form Field Help

Provide helpful hints for form fields.

Password

HTML

<label class="focus-label">
  Password
  <span class="focus-tooltip focus-tooltip-right">
    <i class="fa fa-info-circle" style="color: var(--focus-color-text-muted); cursor: help;"></i>
    <span class="focus-tooltip-content">Must be at least 8 characters with 1 number</span>
  </span>
</label>
<input type="password" class="focus-input" placeholder="Enter password">

Truncated Text

Show full text on hover when content is truncated.

HTML

<span class="focus-tooltip focus-tooltip-multiline focus-tooltip-bottom">
  <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    This is a very long file name that gets truncated in the UI
  </div>
  <span class="focus-tooltip-content">This is a very long file name that gets truncated in the UI</span>
</span>

CSS Classes Reference

Class	Description
`.focus-tooltip`	Container wrapper (required)
`.focus-tooltip-content`	The tooltip popup element
`.focus-tooltip-top`	Position above (default)
`.focus-tooltip-bottom`	Position below
`.focus-tooltip-left`	Position to the left
`.focus-tooltip-right`	Position to the right
`.focus-tooltip-sm`	Smaller tooltip
`.focus-tooltip-lg`	Larger tooltip
`.focus-tooltip-light`	Light background with border
`.focus-tooltip-primary`	Primary color background
`.focus-tooltip-success`	Success color background
`.focus-tooltip-warning`	Warning color background
`.focus-tooltip-danger`	Danger color background
`.focus-tooltip-multiline`	Allow text wrapping (max 250px)
`.focus-tooltip-show`	Force visible (for JS control)