Css tooltip

October 01, 2018

css
style
tooltip
no-js

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: use data-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:

Insert data-tooltip inside the link and use the same style used for the span or other HTML elements.

Check the code on my Codepen posts.


Written by huckbit web developer who lives and works in UK building cool things. You can find me on twitter.