CSS-only tooltip
| 1 min read
Most tooltip libraries are overkill if you just want a small label on hover. A data-tooltip attribute and a sprinkle of CSS gets the job done.
<button data-tooltip="Save changes">Save</button>
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
padding: 0.25rem 0.5rem;
background: #222;
color: #fff;
font-size: 0.75rem;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
opacity: 1;
}
Result
For accessibility, prefer real aria-label attributes when the button has no visible text. The data-tooltip is a visual nicety, not a replacement for proper labels.