MoreLesson 174Free preview

Tooltips

This lesson is part of How To · All levels

Summary

This lesson discusses the tooltip, a small help text that appears when a user directs a cursor or focuses on an element. Tooltips are usually created with pseudo-elements and data attributes to avoid adding too much markup. To be accessible, a tooltip also has to appear when the elements are focused on the keyboard and not be the only place where important information is.

Key points

Container tooltip needs position: relative so that the help text can be positioned absolute
Use the pseudo-element::after with content: attr(data-tooltip) for tooltip content
Show the tooltip on the hover and the focus-visible, not just when the mouse is on top of the element
Link the help text to the aria-describedby when the tooltip contains important information

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.