Tooltips are commonly built using JavaScript, but with modern CSS features, it's now possible to create fully dynamic tooltips using only CSS.

Here's a simple example. We add a custom data-tooltip attribute to an element, and then use the content: attr(data-tooltip) feature in CSS to display it:

<div class="tooltip" data-tooltip="Great!">
  Hover me
</div>

.tooltip {
  position: relative;
}

.tooltip:hover:before {
  content: attr(data-tooltip);
  color: red;
}

This technique lets you assign a different tooltip to each element, using only HTML and CSS — no JavaScript needed. It’s clean, efficient, and great for simple UI enhancements.

Creating Dynamic Tooltip with Only CSS

Full example

Explore More Posts