Add Tool Tips with just CSS
Add Tool Tips with just CSS

Add Tool Tips with just CSS

August 26, 2022
Clark Weckmann
Tool tips are an important part of the user experience. Below is the absolute simplest way to add them to your website.
Tooltips provide contextual information about an element when that owning element receives focus or is hovered over, but is otherwise not visible on the page. The tooltip is displayed automatically, after a brief delay; the user does not request it. While a tooltip can be placed on any content, they generally are tips for tools or controls, such as providing additional content for icons that have brief labels (or no labels at all, which is not accessible!).
~ Mozilla Developers
<!-- Place this in oyur documents <head> --> <link href="" rel="stylesheet"> <!-- Demo --> <a href="#" data-tooltip="Click Me!">Link</a> <!-- It's that easy -->
You can find an example here.
notion image