hint.css

hint.css is a small CSS library that adds tooltips (small popup labels that appear when you hover over an element) to any website, without requiring any JavaScript. You attach a tooltip to an HTML element by adding a CSS class that controls where the tooltip appears, and an aria-label attribute that holds the text to display. The library handles the rest through CSS alone, using pseudo-elements and CSS transitions to show and hide the label on hover.

Because it uses aria-label, which is a standard HTML accessibility attribute designed to describe elements for screen readers, the tooltips are accessible to users who rely on assistive technology. This is a deliberate design choice stated in the README.

Tooltips can be positioned to appear above, below, to the left, or to the right of the element. Modifiers let you control the color (info, warning, error, success), the size, whether the tooltip always stays visible, whether it has rounded corners, whether animation is disabled, and several other visual properties. You combine class names to mix these options.

Installation is straightforward: download the CSS file, reference it via a CDN, or install it through npm. Once the file is linked in your page, no further setup is needed. The library comes in full and base builds; the base build strips out color themes and extra effects for a smaller file size.

The project is written in SCSS (a CSS preprocessor) and the source files are available in the repository if you want to customize the class name prefix or add new tooltip variants. It is MIT licensed and free for personal and commercial use. A list of companies and projects that use hint.css is included in the README, including Fiverr and Webflow Playground.