Hover Over Text To Display A Popup With Text Inside

Common Use Cases for Tooltips

Tooltips serve several essential purposes in web interfaces:

• Clarify cryptic icons - Explaining what icons mean, like a settings gear opening preferences or a heart icon representing favorites
• Reveal truncated text - Displaying complete usernames or email addresses in space-constrained displays
• Define technical terms - Providing definitions for jargon or industry-specific terminology
• Show link destinations - Helping visitors understand where a hyperlink leads before clicking
• Offer form hints - Guiding users through input requirements without cluttering the interface

Basic CSS Tooltip Implementation

The foundation of a maintainable tooltip system uses semantic HTML with the tooltip content stored in a data-tooltip attribute. This approach keeps the visible content clean and separates tooltip text from presentation.

HTML Structure

<button class="tooltip" data-tooltip="This explains the action">Hover me</button>
<span class="tooltip" data-tooltip="Full: [email protected]">john.doe@...</span>

Using a data-* attribute as the content warehouse offers several benefits. The HTML remains semantic and uncluttered. Screen readers can access the content through ARIA attributes. Developers can generate tooltips dynamically without restructuring the DOM.

Adding the Arrow Indicator

A small triangular arrow pointing toward the trigger element creates visual connection. This uses CSS border tricks on a pseudo-element.

.tooltip::after {
 content: "";
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 border-width: 5px;
 border-style: solid;
 border-color: #333 transparent transparent transparent;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease;
}

.tooltip:hover::after {
 opacity: 1;
 visibility: visible;
}

The transparent border technique creates a triangle by making three sides transparent while coloring only the top border.

Positioning Tooltips in All Directions

Top Position (Default)

The top positioning places the tooltip above the trigger element with the arrow pointing downward. Works well for elements with clear space above.

.tooltip-top::before {
 bottom: 125%;
 left: 50%;
 transform: translateX(-50%);
}
.tooltip-top::after {
 bottom: 100%;
 left: 50%;
 border-color: #333 transparent transparent transparent;
}

Bottom Position

Useful when upper space is limited.

.tooltip-bottom::before {
 top: 125%;
 left: 50%;
 transform: translateX(-50%);
}
.tooltip-bottom::after {
 top: 100%;
 left: 50%;
 border-color: transparent transparent #333 transparent;
}

Left and Right Positions

Side-positioned tooltips accommodate horizontal layouts or vertical space constraints.

.tooltip-left::before {
 top: 50%;
 right: 115%;
 transform: translateY(-50%);
}
.tooltip-right::before {
 top: 50%;
 left: 115%;
 transform: translateY(-50%);
}

Multi-Line and Rich Content Tooltips

Handling Long Text

Single-line tooltips work for brief labels, but longer descriptions require wrapping and controlled width.

.tooltip-multiline::before {
 white-space: normal;
 width: 200px;
 text-align: left;
 line-height: 1.4;
}

Setting explicit width and removing nowrap allows text to wrap naturally.

HTML Content Limitation

Pure CSS tooltips using pseudo-elements only accept plain text. HTML inside tooltips requires a hidden child element approach:

<div class="tooltip-with-html">
 <span class="trigger">Hover for details</span>
 <div class="tooltip-content">
 <strong>Important:</strong> <a href="/resources/guides/web-development/">Explore our web development guides</a>
 </div>
</div>

.tooltip-with-html .tooltip-content {
 position: absolute;
 bottom: 125%;
 background: #333;
 color: white;
 padding: 12px;
 width: 250px;
 opacity: 0;
 visibility: hidden;
}

.tooltip-with-html:hover .tooltip-content {
 opacity: 1;
 visibility: visible;
}

Animation and Visual Polish

Smooth Fade Transitions

.tooltip::before {
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Instant appearance */
.tooltip-instant:hover::before {
 transition-delay: 0s;
}

/* Delayed appearance prevents accidental triggers */
.tooltip-delayed:hover::before {
 transition-delay: 0.3s;
}

Scale and Transform Effects

.tooltip-animated::before {
 opacity: 0;
 transform: translateX(-50%) scale(0.9);
 transition: all 0.2s ease;
}

.tooltip-animated:hover::before {
 opacity: 1;
 transform: translateX(-50%) scale(1);
}

Delays of 300-500ms prevent tooltips from flashing during normal mouse movement while still feeling responsive.

Accessibility Requirements

Accessibility is a critical consideration in web development that ensures all users can interact with your interface effectively.

Keyboard Navigation Support

Tooltips must be accessible to keyboard users through :focus styles.

.tooltip:hover::before,
.tooltip:focus::before {
 opacity: 1;
 visibility: visible;
}

ARIA Attributes for Screen Readers

For label tooltips (primary identification):

<button aria-labelledby="tooltip-label" class="tooltip">
 <svg class="icon-settings">...</svg>
</button>
<div role="tooltip" id="tooltip-label">Settings</div>

For description tooltips (supplementary information):

<button aria-describedby="delete-desc" class="tooltip">
 <svg class="icon-trash">...</svg>
</button>
<div role="tooltip" id="delete-desc">
 This will permanently delete the item
</div>

Contrast and Readability

.tooltip::before {
 background-color: #1a1a1a;
 color: #ffffff;
 padding: 8px 12px;
 border-radius: 4px;
}

Common Mistakes to Avoid

Overusing Tooltips

Tooltip fatigue occurs when interfaces require too many hover interactions. Essential information should be visible without hover.

Including Critical Content

Information essential for completing actions--form instructions, error messages--should never rely on tooltips. Some users never trigger hover.

Ignoring Focus States

Forgetting :focus styles excludes keyboard users entirely. Always include both :hover and :focus pseudo-classes.

Poor Positioning Near Edges

Tooltips near viewport edges may overflow and become partially hidden. Consider edge detection for critical tooltips.

Conclusion

Mastering CSS-only tooltips represents a commitment to better, more thoughtful user interfaces. These small details--the polite, informative pop-ups that appear exactly when users need additional context--separate polished, professional websites from basic implementations.

Pure CSS tooltips deliver:

• Performance through minimal JavaScript
• Complete creative control through CSS properties
• Reliable behavior across modern browsers

Start with the basic pattern: semantic HTML using data attributes, pseudo-elements for the tooltip box and arrow, and hover-triggered visibility with smooth transitions. Then experiment with positioning variations, animation effects, and accessibility enhancements.

Remember that tooltips serve supplementary purposes--they clarify without cluttering, inform without overwhelming. When designed thoughtfully, tooltips reduce cognitive load, prevent errors, and make applications feel sophisticated and well-crafted.

For more advanced CSS techniques and web development best practices, explore our comprehensive guides and resources.

Sources

1. CSS-Tricks: Tooltip Best Practices - Comprehensive accessibility-focused guide covering ARIA attributes
2. Dev.to: CSS Tooltips - A Developer's Guide to Better UX (2025 Guide) - Modern pure-CSS approach with code examples
3. W3Schools: CSS Tooltip - Standard reference with basic implementation patterns