Home / Notes

Pure HTML/CSS tooltips

19th March 2026

Tooltips are easy, here's the HTML.

<span title="Here's your tooltip.">Hover over me!</span>

Simple, minimal, and native. End of post.

I suppose we might want something a little fancier, though. The delay you get with title is a bit annoying and you can't style it at all.

Let's keep the basic API the same, but use a custom data attribute so we don't step on the existing functionality of title.

<span data-title="Here's your tooltip.">Hover over me!</span>

We can now do the rest of this with styles.

[data-title]::before {
  background: light-dark(black, white);
  color: light-dark(white, black);
  content: attr(data-title);
  position-anchor: auto;
  position-area: block-end;
  position: fixed;
  visibility: hidden;
}
[data-title]:hover::before {
  visibility: visible;
}

Pretty minimal still, there's no extra HTML structure it's just all CSS. See you later.

Look up anchor positioning and have a play around with the properties, you can do some pretttttty cool stuff.