CSS AdvancedLesson 61Free preview

CSS Tooltips

This lesson is part of CSS · All levels

Summary

A tooltip is a small box containing additional information that appears when a user touches or highlights an element. With pure CSS, tooltips are generally created using a hidden pseudo-element `::after` or `::before` and then displayed in the `:hover` state. The tooltip text is usually taken from HTML attributes with the `attr()` function.

Key points

The tooltip is built from pseudo-element `::after` that fills `content`
`content: attr(data-tip)` read text from custom attributes `data-tip`
Tooltip is hidden with `opacity: 0` and then displayed on `:hover`
The mother tooltip requires `position: relative` to attach the tooltip to the correct position

Full lesson

Code examples and quizzes

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