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

Category: CSS & CSS3 , Recommended , tooltip | June 14, 2018
Author: chinchang
Views Total: 1,752
Official Page: Go to website
Last Update: June 14, 2018
License: MIT

Preview:

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

Description:

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.

Features:

  • 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

Changelog:

06/14/2018

  • v2.5.0

Leave a Reply