Hint.css – A CSS Tooltip Library

Hint.css is a simple CSS tooltip library which you can use to create cool tooltips for your website or web app. It is pure written in CSS and doesn’t uses any Javascript.

Hint.css in Action

hint

Hint.css uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips.

Browser Support

  • Chrome – basic + transition effects
  • Firefox – basic + transition effects
  • Opera – basic
  • Safari – basic
  • IE 10+ – basic + transition effects
  • IE 8 & 9 – basic

Usage

Firstly you need to include the library in document head:

<link rel="stylesheet" href="hint.css"></link>

Use any of the following position classes: hint–top, hint–bottom, hint–left, hint–right to position the tooltip.

Now add the tooltip text using the data-hint attribute on that element.

Hello Sir, <span class="hint--bottom" data-hint="Thank you!">hover me.</span>