explaingit

chinchang/hint.css

★ 8,446CSSAudience · developerComplexity · 1/5LicenseSetup · easy

TLDR

hint.css is a tiny CSS-only tooltip library that adds accessible hover tooltips to any web page by adding a CSS class and an aria-label attribute, no JavaScript required.

Mindmap

mindmap
  root((hint.css))
    What it does
      CSS-only tooltips
      No JavaScript needed
      Accessible by default
    Tooltip Options
      Position above/below/sides
      Color themes
      Always-visible mode
    Tech
      CSS classes
      aria-label attribute
      SCSS source
    Audience
      Web developers
      Frontend designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add hover tooltips to buttons, icons, or links on any web page without writing any JavaScript.

USE CASE 2

Display accessible warning, error, or info labels on UI elements using built-in color modifier classes.

USE CASE 3

Create screen-reader-friendly tooltips using the standard aria-label attribute rather than the title attribute.

Tech stack

CSSSCSS

Getting it running

Difficulty · easy Time to first run · 5min
Free to use for any purpose, personal or commercial, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me the HTML markup and CSS class names to add a red error tooltip that appears above a button using hint.css.
Prompt 2
How do I install hint.css via npm and import it into a Sass build to change the default class name prefix?
Prompt 3
I want a tooltip that is always visible (not just on hover) on an icon in my nav bar, which hint.css modifier class does that?
Prompt 4
Replace all title attribute tooltips on a page with hint.css aria-label tooltips positioned to the right of each element.
Open on GitHub → Explain another repo

← chinchang on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.