Light and Clean Tooltips With CSS3 Animations – html5tooltips.js

html5tooltips.js is a powerful JavaScript library that attaches clean and CSS3 animated tooltips containing any html content to a specified DOM element.

How to use it:

Include the html5tooltips.css for basic tooltip styles.

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

Include the html5tooltips.animation.css for CSS3 animations.

<link rel="stylesheet" href="html5tooltips.animation.css">

Include the core JavaScript on the web page.

<script src="html5tooltips.js"></script>

Add a basic tooltip to a specific element using data-tooltip attribute.

<span data-tooltip="Refresh"></span>

Add a custom tooltip to a specific element using JavaScript method.

html5tooltips([
  {
    contentText: "Tooltip Text",
    contentMore: "More Tooltip Text",
    targetSelector: "#el",
    stickTo: "top"
  }
]);

Full customization options.

html5tooltips([
  {
    // animation duration in milliseconds
    animateDuration: 300,
    // fadein, foldin, foldout, roll, scalein, slidein, spin
    animateFunction: "fadeIn", 
    // daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper; or any CSS color.
    color: null,
    // delay in milliseconds
    delay: 500,
    hideDelay: 300,
    // custom text for tooltip
    contentText: "",
    // more text for tooltip
    contentMore: "",
    // disable animation
    disableAnimation: false,
    // if set to true, the tooltip will wait for hideDelay number of milliseconds before hide
    persistent: false,
    
    // bottom, left, right, top
    stickTo: "bottom", 
    // offset in pixels
    stickDistance: 10,
    
    // used to catch a target element in the document
    targetSelector: "",
    
    // max with in pixels
    maxWidth: null
  }
]);

You can also pass the options via HTML data attributes:

• data-tooltip
• data-tooltip-animate-function
• data-tooltip-disable-animation
• data-tooltip-color
• data-tooltip-more
• data-tooltip-delay
• data-tooltip-stickto
• data-tooltip-maxwidth
• data-tooltip-hide-delay
• data-tooltip-persistent

Changelog:

v1.7.3 (2018-07-30)

• Update & more options