Real-world Patterns Tooltips State Tracking
Apply data-* for tooltips, active states, and component configuration.
Tooltip with data-tooltip
Store tooltip text in data-tooltip on the trigger element. CSS [data-tooltip]:hover::after { content: attr(data-tooltip) } displays it without JavaScript. For accessible tooltips, add role="tooltip" and aria-describedby pointing to a real element.
Positioning CSS Tooltips
The trigger needs position: relative. The ::after pseudo-element uses position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) to center the tooltip above the trigger. Add white-space: nowrap to prevent wrapping.
All lessons in this course
- data-* Syntax and Naming Conventions
- Accessing data-* with dataset in JavaScript
- Using data-* with CSS attribute selectors
- Real-world Patterns Tooltips State Tracking