← All elements
<button class="tip" data-tip="Copied to clipboard!">Hover or focus me</button>About this hover effect
A tooltip that reads its text from a data-tip attribute through attr() and appears on hover or keyboard focus.
How it works
The tooltip text lives in a data-tip attribute on the button. The ::after pseudo-element reads it through content: attr(data-tip) and is positioned above the button. A small ::before triangle forms the arrow. Both start transparent and fade in on :hover or :focus-visible.
Ways to customise it
- Change data-tip to change the message without touching the CSS.
- Switch bottom: calc(100% + 10px) to top to show the tip below.
- Edit the background colours of ::after and the arrow border together.
Good to know
Because it also reacts to keyboard focus, people without a mouse can see it. Pseudo-element text is not reliably read aloud, so keep essential information in the visible label too.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.