Lightweight AJAX-Enabled Tooltip Library – drooltip.js

Preview:

Description:

drooltip.js is a feature-rich JavaScript tooltip plugin used to create customizable, dynamic tooltips from any content (e.g. text, html, JSON, ajax content, etc.). The plugin comes with 4 animations: BOUNCE, FADE, MATERIAL and FLOAT. It also has the ability to re-position itself according to the available screen.

Basic usage:

First you need to load the JavaScript drooltip.js and stylesheet drooltip.css in the document.

<link rel="stylesheet" src="/path/to/drooltip.css">
<script src="/path/to/drooltip.js"></script>

Then define your own content displayed in the tooltip using ‘title’ attribute as this:

<span class="demo" title="Tooltip"> Hover Me </span>

The last step is to initialize the plugin on the ‘span’ element.

var tooltip = new Drooltip({"element" : ".demo"});

Customize the tooltip as per your need.

var tooltip = new Drooltip({
    // target element
    "element" : ".demo",
    // custom trigger event
    "trigger" : "hover",
    // where to position the tooltip
    "position" : "top",
    // background color
    "background" : "#2175ff",
    // text color
    "color" : "#fff",
    // or fade, float, material
    "animation": "bounce",
    // tooltip content
    "content" : null,
    // callback function
    "callback" : null
    
});

API.

// Animate all tooltips
tooltip.animateAllTooltips()  
// Deanimate all tooltips
tooltip.deanimateAllTooltips()
// Animate an individual tooltip
tooltip.animateTooltip(data)
// Deanimate an individual tooltip
tooltip.deanimateTooltip(data)
// Show all tooltips
tooltip.showAllTooltips() 
// Hide all tooltips
tooltip.hideAllTooltips() 
// Show a specific tooltip
tooltip.showTooltip(tooltip)  
// Hide a specific tooltip
tooltip.hideTooltip(tooltip)  
// Animate the tooltip with an included effect
tooltip.addStandardEffect(tooltip, effect)  
// Denimate the tooltip with an included effect
tooltip.removeStandardEffect(tooltip, effect) 
// Show the tip arrow of a tooltip
tooltip.showArrow(tooltip)  
// Hide the tip arrow of a tooltip
tooltip.hideArrow(tooltip)  
// Intelligently update the position of a tooltip relative to its target element
tooltip.updatePosition(data)

Changelog:

05/16/2019

• Added Mobile Touch support

v1.0.2 (09/23/2018)

• Added support for IE-11/non-ES6 compliant browsers