CSS-Only Limited A11y

Tooltip

CSS-only tooltip component for quick hover hints using pseudo-elements. Zero JavaScript required, but with accessibility limitations for non-focusable elements.

Accessibility Notice: This CSS-only tooltip has limitations. It works well on focusable elements (buttons, links, inputs) but fails keyboard access on non-focusable elements. For full accessibility with screen readers and keyboard support on all elements, use the Tier 3 JS-enhanced version.

Example

Link with tooltip 
<button class="omni-button" data-variant="primary" data-omni-tooltip="This is a tooltip">Hover me</button>
<button class="omni-button" data-variant="secondary" data-omni-tooltip="Another helpful hint" data-position="bottom">Bottom tooltip</button>
<button class="omni-button" data-variant="success" data-omni-tooltip="Success message" data-position="right">Right tooltip</button>
<a href="#" data-omni-tooltip="Opens in new tab">Link with tooltip</a>

Usage

Add the data-omni-tooltip attribute to any element. The tooltip appears on hover (mouse) and focus (keyboard) for focusable elements.

On Focusable Elements (Recommended)

Works best on buttons, links, and form inputs that can receive keyboard focus:

Download

On Non-Focusable Elements (Mouse Only)

Works with mouse hover only. Keyboard users and screen reader users will not have access:

Active Inactive
Tip: For critical information, don't rely solely on tooltips. Include important details in visible UI elements or use the JS-enhanced tooltip for full accessibility.

Position

Use data-position to control tooltip placement:

Top (default)

Bottom

Left

Right

<button data-omni-tooltip="Top tooltip">Top</button>
<button data-omni-tooltip="Bottom tooltip" data-position="bottom">Bottom</button>
<button data-omni-tooltip="Left tooltip" data-position="left">Left</button>
<button data-omni-tooltip="Right tooltip" data-position="right">Right</button>

Style Variants

Multiline

Use data-style="multiline" for longer tooltip content that wraps:

<button data-omni-tooltip="This is a longer tooltip message..." data-style="multiline">
  Multiline Tooltip
</button>

No Arrow

Use data-style="no-arrow" to hide the tooltip arrow:

<button data-omni-tooltip="Tooltip without arrow" data-style="no-arrow">No Arrow</button>

Semantic Variants

Combine tooltips with OmniUI's variant system for semantic colors:

Note: The tooltip inherits a dark background by default. For colored tooltips, apply data-variant directly to the tooltip element (requires custom CSS or Tier 3 JS enhancement).

API Reference

Attribute Values Default Description
data-omni-tooltip string — Tooltip text content (required)
data-position top, bottom, left, right top Tooltip placement relative to trigger
data-style multiline, no-arrow — Visual style treatment

Accessibility

What Works

  • Mouse hover on any element shows tooltip
  • Keyboard focus on focusable elements (buttons, links, inputs) shows tooltip
  • Respects prefers-reduced-motion for animations
  • Touch support on mobile (tap/active state)

What Doesn't Work (CSS Limitations)

  • Keyboard access on non-focusable elements (span, div, etc.)
  • Screen reader announcement (pseudo-elements lack ARIA support)
  • Escape key dismissal
  • Programmatic control (show/hide via JavaScript)

Best Practices

  • Use tooltips only on focusable elements when possible
  • Keep tooltip content supplementary, not critical
  • Don't hide important information only in tooltips
  • For icon-only buttons, use aria-label (not just tooltip)
  • Consider using title attribute as fallback for screen readers
  • For full accessibility, use the Tier 3 JS-enhanced tooltip
Critical Information Warning: Never rely solely on tooltips for critical information or instructions. Users without mouse access may never see them. Always provide important details in visible, accessible UI elements.

Implementation Details

How It Works

This tooltip uses CSS pseudo-elements (::before for content, ::after for arrow) triggered by :hover and :focus-visible states. The attr(data-omni-tooltip) function extracts the tooltip text directly from the HTML attribute.

Browser Support

Works in all modern browsers that support:

  • CSS pseudo-elements (::before, ::after)
  • attr() function
  • CSS logical properties (inset-block, inset-inline)
  • CSS custom properties (design tokens)

Performance

Pure CSS implementation means:

  • Zero JavaScript overhead
  • No DOM manipulation
  • No event listeners
  • Hardware-accelerated transforms
  • Works in HTML emails (where supported)

Components Used

Other OmniUI components demonstrated on this page:

Button Badge Alert Input