How to make a tooltip

Short answer

The simplest tooltip is the title attribute, which the browser shows by itself:

<button title="Copies the link to the clipboard">Copy link</button>

It shows up with a delay, looks different on each system and does not appear on phones or with the keyboard.

A custom tooltip

The text lives in a data-* attribute, and the ::after pseudo-element draws it:

<style>
  .tip { position: relative; margin: 40px 16px 8px; }
  .tip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0;
    padding: 4px 8px; border-radius: 4px; background: #222; color: white; font-size: 12px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .tip:hover::after, .tip:focus-visible::after { opacity: 1; }
</style>
 
<button class="tip" data-tip="Saved to your list">Save</button>

attr(data-tip) puts the attribute's value into content. pointer-events: none stops the tooltip from catching the pointer.

Accessibility

Screen readers do not always read text from ::after. If the hint matters, connect it to the button with aria-describedby and a separate element with the text. For tooltips with buttons or links inside, use popover.

Common mistake

Hiding important information in a tooltip — a price, terms, a form error. On a phone no one will see a hover hint. A tooltip is extra; everything needed to act should be visible right away.