Tooltip

A tooltip component built without JavaScript.

Tooltip

This is a tooltip that appears on top
This tooltip appears on the right side
This tooltip appears on the left side
This tooltip appears at the bottom

Keyboard users: Use Tab to navigate between tooltips. Tooltips appear automatically when focused.

Tooltips in Form Fields

Username must be 3-20 characters and contain only letters, numbers, and underscores.
Password must be at least 8 characters and include a number, a special character, and both upper and lowercase letters.

How It Works

This tooltip component is built using only HTML and CSS, with no JavaScript required. It demonstrates how to create accessible, interactive UI components using CSS pseudo-classes and positioning.

The implementation uses the CSS :hover and :focus pseudo-classes to control the visibility of the tooltip content. Various tooltip positions are achieved through CSS positioning and transforms.

Key Features

  • Pure CSS: No JavaScript needed for basic functionality
  • Multiple Positions: Support for top, right, left, and bottom tooltip positions
  • Keyboard Accessible: Tooltips appear on focus for keyboard users
  • Customizable: Easy to style with CSS variables
  • Small Footprint: Minimal markup and CSS required

Accessibility Features

This tooltip component includes several accessibility features:

  • ARIA Attributes: Using aria-describedby to associate tooltip text with its trigger
  • Role Definitions: Proper role="tooltip" for screen reader recognition
  • Semantic HTML: Using button elements for interactive triggers
  • Keyboard Accessibility: Tooltips appear on focus, not just hover
  • Focus Indicators: Clear visual focus indicators for keyboard navigation
  • Sufficient Contrast: Text and background colors meet WCAG contrast requirements
  • Responsive Design: Works on various screen sizes
  • Tab Order: Logical tab order for keyboard navigation
  • Visual Instructions: Visible instructions for keyboard users
  • No Mouse Dependency: All functionality available without a mouse

The CSS-only implementation means that screen readers will automatically read the tooltip content when a user focuses on a trigger element, thanks to the aria-describedby attribute.

Additional Resources

Implementation Code

HTML with ARIA attributes

<!-- Basic Tooltip -->
<div class="tooltip">
  <button class="tooltip-trigger" aria-describedby="tooltip-1" tabindex="0">Hover me</button>
  <span class="tooltiptext" id="tooltip-1" role="tooltip">This is a tooltip</span>
</div>

<!-- Right Positioned Tooltip -->
<div class="tooltip position-right">
  <button class="tooltip-trigger" aria-describedby="tooltip-2" tabindex="0">Right tooltip</button>
  <span class="tooltiptext" id="tooltip-2" role="tooltip">This tooltip appears on the right side</span>
</div>

CSS with accessibility support

/* Tooltip Container */
.tooltip {
  position: relative;
  display: inline-block;
  margin: 2rem;
}

/* Tooltip Trigger - using button for better semantics */
.tooltip-trigger {
  background-color: var(--primary-color, #0077cc);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: inline-block;
  transition: background-color 0.3s ease;
  border: none;
  font-family: inherit;
  font-size: 1rem;
}

/* Tooltip Text */
.tooltiptext {
  visibility: hidden;
  width: 200px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none; /* Prevents tooltip from blocking interactions */
}

/* Show the tooltip on hover AND focus for accessibility */
.tooltip:hover .tooltiptext,
.tooltip-trigger:focus + .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Accessible focus indicator - high contrast */
.tooltip-trigger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--primary-color, #0077cc);
}

/* Different tooltip positions with appropriate CSS */
.tooltip.position-right .tooltiptext {
  top: 50%;
  left: 110%;
  bottom: auto;
  transform: translateY(-50%);
}

Accessibility Best Practices for Tooltips

  • Use semantic HTML: Prefer <button> elements for interactive tooltips
  • Include ARIA attributes: aria-describedby connects the tooltip text to the trigger
  • Add proper roles: role="tooltip" helps screen readers identify tooltip content
  • Support keyboard navigation: Ensure tooltips appear on focus, not just on hover
  • Use unique IDs: Each tooltip needs a unique ID for proper aria-describedby references
  • Add high contrast focus states: Make focus indicators clearly visible
  • Ensure color contrast: Text in tooltips should meet WCAG contrast requirements