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.