Light and Clean Tooltips With CSS3 Animations – html5tooltips.js

Category: Javascript , Tooltip | July 30, 2018
Views Total:200 views
Official Page:Go to website
Last Update:July 30, 2018


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.

    contentText: "Tooltip Text",
    contentMore: "More Tooltip Text",
    targetSelector: "#el",
    stickTo: "top"

Full customization options.

    // 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


v1.7.3 (2018-07-30)

  • Update & more options

You Might Be Interested In:

Leave a Reply