CSS Tooltips

A lot of web sites use JavaScript to create tooltip but is actually easier with CSS.

Inside span elements:

It’s a quick and simple process: usedata-tooltip, for example in span elements, or where you want in your HTML code. To show the content put content property equal to attr()inside the pseudo element and style as you like.

<p> This is a text with a <span class="tooltip" data-tooltip="The HTML span element is a generic inline container">span</span> element inside a paragraph</p>

.tooltip:hover::after {
  content: attr(data-tooltip);
  /*style as you like*/
}

Inside a link as well:

Insertdata-tooltipinside the link and use the same style used for the span or other HTML elements.

You can try the tooltip with the interactive example down below:

See the Pen Pure CSS Tooltips by Massimiliano Ranauro (@huckbit) on CodePen.

Do you usually use tooltips inside your web site? Let me know, leave a comment on this post.

You can see the same post inside Codepen posts too.