$('.element-with-tooltip').hover(function() {
    // get tooltip text
    var title = $(this).data('tooltip');

    //make tooltip element
    $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
    // Hover out code
    $('.tooltip').remove();
}).mousemove(function(e) {
    //position tooltip
    var mousex = e.pageX
    var mousey = e.pageY
    $('.tooltip')
        .css({
            top: mousey,
            left: mousex
        })
});

/**
* Example
http://jsbin.com/xilunog/edit?html,css,js,output

* html
<button data-tooltip="When clicked I will do this" class="element-with-tooltip">Click Me</button>

* css
.tooltip {
  color: white;
  background: black;
  padding: 5px;
  display: inline;
  border-radius: 25px;
  font-size: 10px
}
*/
@@ -1,12 +1,257 @@
+/**%0A * Name; Tooltip%0A * Author: Arturo Romero%0A * Author Email: artromero801@gmail.com%0A * Created : 10/12/16%0A * Description: Add a text tooltip to any element with a data attribute%0A * example: http://jsbin.com/xilunog/edit?html,css,js,output%0A */%0A
 $('.element-
@@ -519,12 +519,22 @@
 out 
-code
+remove tooltip
 %0A   
@@ -756,313 +756,7 @@
  %7D)%0A
+
 %7D);
-%0A%0A/**%0A* Example%0Ahttp://jsbin.com/xilunog/edit?html,css,js,output%0A%0A* html%0A%3Cbutton data-tooltip=%22When clicked I will do this%22 class=%22element-with-tooltip%22%3EClick Me%3C/button%3E%0A%0A* css%0A.tooltip %7B%0A  color: white;%0A  background: black;%0A  padding: 5px;%0A  display: inline;%0A  border-radius: 25px;%0A  font-size: 10px%0A%7D%0A*/

add tooltip.js