Add Tool Tips with just CSS

date
Aug 26, 2022
slug
tooltips
status
Published
tags
Website
CSS
type
Post
OG_override
summary
Tool tips are an important part of the user experience. Let’s cover the absolute simplest way to add them to your website.
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 -->
You can find an example here.
notion image

© Clark Weckmann 2014 - 2022