In CSS you can populate `content:` with a `data-` attribute

In CSS you can populate `content:` with a `data-` attribute Jun 2 2025

I just learned how to implement a tooltip in pure CSS using attr() like this:

<style>
<span class="tooltip" data-tooltip="this is a tooltip!">Hover over me!</span>
.tooltip:hover:after{
  content: attr(data-tooltip); /* <-- this part! */
  background: #333;
  color: white;
  padding: 4px;
</style>

Here’s the preview:

Hover over me!

I wanted to keep this example small but In real life I’d use position: and transform: to move the tooltip somewhere else.