Pure CSS based tooltips.
A few things to keep in mind when using CSS tooltips:
- Tooltips make use of pseudo-elements, so self-closing elements such as
<hr>will not render tooltips.
- If pseudo elements are already in use on an element, the tooltip will conflict with them resulting in potential bugs.
- Tooltips set the element to
position: relative;and use absolute positioning to position itself.
- Tooltips can’t display images or html content as it’s value is defined by a data-attribute.