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

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

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. HTML elements

• Define the HTML that you want to load

  <div class="myHTML">
  	<h2>My title</h2>
  	<p>Some content here</p>
  </div>

• Then just reference the element(by it's ID or class) in the title like so

  <span class="myTooltip" title=".myHTML">...</span>

8. 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"];
  }
   

9. Useful API

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

• 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();
  }