← All elements
<button class="tt" data-tip="Copied to clipboard">Copy link</button>About this hover effect
A dark tooltip bubble with a pointer that pops above a button on hover or keyboard focus.
How it works
The bubble and its arrow are the before and after pseudo-elements of the button. The text comes from a data-tip attribute through attr(), and both fade and move into place on hover or focus-visible.
Ways to customise it
- Change the text in data-tip.
- Move the tooltip below the button.
- Change the dark colours.
Good to know
Tooltips from pseudo-elements are not announced by every screen reader, so keep the key information visible or in aria-label.
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.