1. Overview

Drooltip is a native javascript plugin that is aimed to provide developers custom tooltips that are beautiful, powerful & extensible. It is pretty lightweight too, without too much bloat & unnecessary features.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lacus elit. Maecenas aliquet augue sodales, vulputate odio nec, facilisis felis.

    Demos
  • Hover me
  • Custom triggers
  • HTML elements
  • AJAX/Jsonp
  • Smart positioning
  • Custom animations

2. Installation

  • Include Drooltip.js in your project
    <script type="text/javascript" src="/path/to/drooltip.js"></script>
  • ... and the CSS file too
    <link rel="stylesheet" src="/path/to/drooltip.css" />
  • Add a class/id and a title attribute with the contents of your tooltip to the element you wish the tooltip to appear at
    <span class="myTooltip" title="Hi there!"> I am some random text </span>
  • Initiate a Drooltip instance in your js file
    var tooltip = new Drooltip({"element" : ".myTooltip"});

3. Customization

  • You can define the options right in the initialization method
           var tooltip = new Drooltip({
           "element" : ".myTooltip",
           "trigger" : "hover",
           "position" : "top",
           "background" : "#2175ff",
           "color" : "#fff",
           "animation": "bounce",
           "content" : null,
           "callback" : null
      }); 
  • or you can overwrite the options set in the initialization by manually adding it to the data-options attribute of desired elements
           <span class="myTooltip" data-options="background:#fff;animation:fade;">Hello</span> 
  • Similarly content of tooltip can be set in the initialization or be overwritten mannually by adding the title tag
           <span class="myTooltip" title="My content">Hello</span> 
Option Value
element Target element to add tooltip on
Default: .drooltip
trigger How do you want the tooltip be shown
click Default: hover
position Position of tooltip relative to target element
right bottom left Default: top
background
Default: #2175ff
color
Default: #fff
animation
fade float material Default: bounce
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.
Default: null
callback
Default: null

4. Animations

    Included animations:
  • Bounce
  • Fade
  • Material
  • Float

    4.1 Defining custom animations

    As I intended this to be a lightweight plugin, there isnt a gazillion choices of animations. But you can create one quite easily!
    Material and the Float are actually custom animations in design, but I thought they looked pretty cool, so I included them in the plugin anyways

    • 1. Specify the name of your custom animation
                 var tooltip = new Drooltip({
         ...
         "animation": "myCustomAnimation",
         ...
      }); 
                
    • 2. Create the relevant function; There will be 3 parameters that'll be passed to your function:
      • fnStr "animate" | "deanimate"
      • dataObject {id, source, tooltip, options}
      • callback
      • Context:
      • thisObject instance
                function myCustomAnimation(fn, data, callback){
          var obj = this; // context => Drooltip Instance
          // There should be 2 paths basically
          if ( fn === "animate" ) {
          obj.hideAllTooltips();
          setTimeout(function(){
          data["tooltip"].classList.add("myCustomCSSAnimation")
          ... do some other cool stuff here ...
          if ( callback !== null || window[callback] !== undefined ) {
              window[callback](); // call the callback function
          }
          }, 200)
          } else if ( fn === "deanimate" ) {
          ... perform the deanimation here ...
          }
      } 

5. Positioning

Drooltip is pretty good at positioning itself accordingly to the available screen real-estate. Additionally you can specify a default position of your tooltips, but it is important to note that regardless of what position is set, it will be overruled if there is not enough space on the screen to display the tooltip to your desired position

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac lacus elit. Maecenas aliquet augue sodales, vulputate odio nec, facilisis felis.Mauris vitae vestibulum urna, vitae varius mi. Cras vulputate pharetra massa vitae pulvinar. Sed quis sem sem. In accumsan vestibulum magna, ut euismod metus auctor ac. Morbi tempor lectus vel congue porta. In enim sem, consequat eget elit et, semper iaculis odio.

This is a demo illustrating how the positioning system works on screen resize

6. Triggers

So as all tooltips, Drooltips comes with 2 trigger types you can use: hover and click. But what if you want to make your own ? It's pretty simple & is very similar to defining custom animatons.

  • 1. Specify the name of your custom trigger
           var tooltip = new Drooltip({
           ...
           "trigger": "myCustomTrigger",
           ...
      }); 
  • 2. Create the relevant function; The data object will be passed to your function
    • dataObject {id, source, tooltip, options}
    • Context:
    • thisObject instance
            
        function myCustomTrigger(data){
          var obj = this;
          var tooltipDom = data["tooltip"]
          var sourceDom = data["source"]
          obj.hideTooltip(tooltipDom) // -> instance.hideTooltip()
          var timeout, exit = 0
          window.addEventListener("mouseover", function(e){   
            if ( data["source"].contains(e.target) || data["tooltip"].contains(e.target) ){
              clearTimeout(exit)
            } else {
              exit = setTimeout(function(){
                if ( data["tooltip"].classList.contains("open") ) {
                  obj.deanimateTooltip(data)  // -> instance.deanimateTooltip()
                }
              }, 1000);
            }
          })
    
          data["source"].addEventListener("mouseenter", function(e){   
            sourceDom.querySelector(".countdown").innerHTML = "Wait for 1 second";
            timeout = setTimeout(function(){
              obj.animateTooltip(data) // -> instance.animateTooltip()
              sourceDom.querySelector(".countdown").innerHTML = "Boom!";
            }, 1000);
          });
    
          data["source"].addEventListener("mouseleave", function(e){   
            sourceDom.querySelector(".countdown").innerHTML = "";
            clearTimeout(timeout)
          });
        }
            
    This code is used to perform the Custom Trigger demo shown

7. Ajax/Json

If you wish to load content to your tooltip dynamically, you can do via AJAX or JSONp

    7.1 Loading non-json dynamic content via AJAX

    • Via the Initialisation
      var tooltip = new Drooltip({
      	...
      	"content" : {
      	"type" : "ajax",
      	"url" : "script.php",
      	},
      	...
      }); 
    • or Via the title tag
      <span class="myTooltip" title=":ajax[script.php]:"> I am some random text </span>

    7.2 Loading json data

    • To load json data, you can use AJAX or JSONP
      var tooltip = new Drooltip({
      	...
      	"content" : {
      	"type" : "ajax", // or "jsonp"
      	"url" : "https://mypage",
      	"json" : "myJSONVariable"
      	},
      	...
      }); 
    • or Via the title tag
      <span class="myTooltip" title=":ajax[https://mypage, myJSONVariable]:"> I am some random text </span>

      7.2.1. Using a callback function to load JSON data

        Sometimes, you may want to format your JSON data before loading it to the tooltip, to do this you may want to use a callback function

      • 1. Just add "()" at the end of your value in the json parameter to use a function
        var tooltip = new Drooltip({
        	...
        	"content" : {
        	"type" : "jsonp", // or ajax
        	"url" : "http://link.com/JSON",
        	"json" : "myJSONFunction()" // just add "()" for function
        	},
        	...
        });
        
        
      • ... or the title tag
        <span class="myTooltip" title=":jsonp[http://link.com/JSON, myJSONFunction()]:"> I am some random text </span>
      • 2. Then define the respective function which accepts the data object
        • dataObject {...}
        function myJSONFunction(data) {
        	return data["myJSONVariable"];
        }
         

8. Useful API

The following are some functions you may find useful especially when creating custom animations/triggers

Function Description
animateAllTooltips() Animate all tooltips associated in the instance
deanimateAllTooltips() Deanimate all tooltips associated in the instance
animateTooltip(data) Animate an individual tooltip
deanimateTooltip(data) Deanimate an individual tooltip
showAllTooltips() Show all tooltips of that instance (no animation)
hideAllTooltips() Hide all tooltips of that instance (no animation)
showTooltip(tooltip) Show a specific tooltip
hideTooltip(tooltip) Hide a specific tooltip
addStandardEffect(tooltip, effect) Animate the tooltip with an included effect
removeStandardEffect(tooltip, effect) Denimate the tooltip with an included effect
showArrow(tooltip) Show the tip arrow of a tooltip
hideArrow(tooltip) Hide the tip arrow of a tooltip
updatePosition(data) Intelligently update the position of a tooltip relative to its target element
  • An example on how to use the function
    var tooltip = new Drooltip({ ... })
    tooltip.animateAllTooltips();
    
    // or when using in custom triggers/animations
    function customAnimation(data){
        var obj = this;
        obj.animateAllTooltips();
    }