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.

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

for more articles and tutorials visit my profile on codepen or my blog on huckbit.github.io.

3,041 3 48