Create Animated Tooltips With Pure CSS/CSS3 – Hint.css

Category: CSS & CSS3 , Recommended , Tooltip | October 2, 2021
Views Total:428 views
Official Page:Go to website
Last Update:October 2, 2021


Create Animated Tooltips With Pure CSS/CSS3 – Hint.css


HINT.css is a tooltip library made in pure CSS/CSS3 that allows you create nice looking and animated tooltips/hints on your web page.


  • Lightweight and easy to use.
  • Animations based on CSS3 transitions and transforms.
  • Fully customizable via CSS classes.
  • 4 directions: left, right, top and right.
  • 8 extra types of tooltip/hint: error, warning, info, success, always, rounded, no-animate, and bounce.

How to use it:

Include the hint.css in the head section of your document.

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

Add a link to the Html element. Use ‘data-hint’ attribute for the tooltip/hint content. Use class attribute to specify the direction and other available modifiers.

<a class="hint--top  hint--error" data-hint="This is an error tooltip">Hover me</a>

You can also use the ‘aria-label’ attribute instead.

<a class="hint--top  hint--error" aria-label="This is an error tooltip">Hover me</a>

All possible themes.

  • hint–error
  • hint–info
  • hint–warning
  • hint–success

Change the size of the tooltip.

  • hint–small
  • hint–medium
  • hint–large

More CSS classes to customize the tooltip

  • hint–always: always display
  • hint–rounded: rounded corner
  • hint–no-animate: with no animation
  • hint–bounce: with bounce animation


v2.7.0 (10/02/2021)

  • Add new class to hide arrow – hint–no-arrow


  • v2.6.0


  • v2.5.1

You Might Be Interested In:

Leave a Reply