CSS Tooltip Demo
Pure CSS Tooltips
Download Back To CSSScript.Com
Hover or focus the controls below to preview tooltip positions, color variants, icon actions, inline text notes, form hints, and compact status labels.
Position
Four placement directions
01
Variants
Color and tone options
02
Icon Buttons
Compact action controls
03
Forms
Hints beside inputs
04
Status
Readable labels with context
05
Inline Text
Tooltips inside running copy
06
A tooltip can be attached to a single inline element without extra markup. The small pointer can come from another pseudo-element, while the message itself reads from a data attribute. Keyboard users can also focus each term.
::before bubble
::after arrow
data-tip text
:hover and :focus-visible