Drooltip.js – Beautiful and Intelligent Tooltips

Drooltip.js

The pure, vanilla JavaScript Plugin Drooltip.js provides beautiful, powerful and extensible Tooltips. It is compatible with all modern browsers, including the 11+, but doesn’t offer an AMD or nodeJS Module definition. The script itself does also update the tooltip position on Screen Resize and offers the possibility to load the Tooltip Content using AJAX and JSONP.

Download the latest version of Drooltip.js as .ZIP or as .TAR package!

npm i drooltip.js --save

yarn add drooltip.js --save

Instructions

The package itself contains the main Source JavaScript file as well as the default Stylesheet. The last on is also available in the Pre-Processing language SASS (SCSS) and offers also a respective Source Map. Both files aren’t available in a minfied version!

 

Load Drooltip.js

Just load the Stylesheet within the header of your HTML document. It’s recommended to load the JavaScript file immediately after the opened <body> tag.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/drooltip.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/drooltip.src.js"></script>
    </body>
</html>

 

Configure Drooltip.js

The script itself currently just offers 8 different options to configure the behavior and the design of the tooltip. The options can also be applied on the target element, by using the custom attribute data-options=""!

document.addEventListener("DOMContentLoaded", {
    var tooltip = new Drooltip({
        animation:  "bounce",
        background: "#2175ff",
        callback:   null,
        color:      "#fff",
        content:    null,
        element:    ".myTooltip",
        trigger:    "hover",
        position:   "top"
    });
});

 

Configure: Options

animation
The animation style: “fade”, “float”, “material” or “bounce”.
background
The background color of the tooltip element.
callback
A callback function to create a custom animation effect.
color
The text color fo the tooltip element.
content
If the content option is set, it’s value will be applied to all tooltips in that instance; However, if the source element contains the title attribute, this option will be ignored for the tooltip associated with that element.
element
Target element to add tooltip on
trigger
How do you want the tooltip be shown: “click” or “hover”.
position
Position of tooltip relative to target element: “top”, “right”, “bottom”, “left”.

Leave a Reply

Top