Lightweight AJAX-Enabled Tooltip Library – drooltip.js

Category: Javascript , tooltip | May 16, 2019
Author: prevwong
Views Total: 2,033
Official Page: Go to website
Last Update: May 16, 2019
License: MIT

Preview:

Lightweight AJAX-Enabled Tooltip Library – drooltip.js

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

You Might Be Interested In:


Leave a Reply