DEV Community

Cover image for Add Tool Tips with just CSS
Clark Weckmann
Clark Weckmann

Posted on

Add Tool Tips with just CSS

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="https://gh.wkmn.cloud/CSSTooltip/tooltip.css" rel="stylesheet">

<!-- Demo -->

<a href="#" data-tooltip="Click Me!">Link</a>

<!-- It's that easy -->
Enter fullscreen mode Exit fullscreen mode

You can find an example here.

Button hovered with tool tip popping up

Top comments (0)