Snippets - Javascript - JQuery

// include this after the jquery lib
;(function($) {
$.fn.tooltip = function(options) {
  var opts = $.extend({}, $.fn.tooltip.defaults, options);
  
  // add hover div 
  if ($('#tooltip').length == 0) {
     $('body').prepend('<div id="tooltip"></div>') 
  }
  var $tooltip = $('#tooltip') 
  
  return this.each(function() {
    var $this = $(this);

    // get title
    var title = $this.attr('title')
    
    if(title != undefined && title != '') {
      $this.mousemove(function(e) {
        // remove title
        $this.removeAttr('title')
        
        $tooltip.html(title)
        if(opts.position=='bottom left'){
                var top = e.clientY +10
                var left = e.clientX -  $tooltip.width()-20;
        } else { //'bottom right'
                var top = e.clientY 
                var left = e.clientX + 20
        }
        $tooltip
                .css('top', top)
                .css('left',left)

        if (opts.fadeIn) {
          $tooltip.stop().fadeTo(opts.fadeInSpeed,1)
        } else {
          $tooltip.show()
        }
         
      }).mouseout(function() {
        if (opts.fadeOut) {
          $tooltip.stop().fadeTo(opts.fadeOutSpeed,0,function(){$tooltip.hide()})
        } else {
          $tooltip.hide()
        }
        // add title again
        $this.attr('title',title)
      });
    }
    
  });
  
};

// default options
$.fn.tooltip.defaults = {
  position:'bottom right',
  fadeIn:false,
  fadeOut:false,
  fadeInSpeed:200,
  fadeOutSpeed:200,
};

})(jQuery);

by stefan

#tooltip {
   padding:5px;
   background-color: #4B7399;
   border: 1px solid #4B7399;
   -webkit-border-radius: 3px;
   -webkit-box-shadow: #324F72 5px 5px 5px;
   -moz-border-radius: 3px;
   -moz-box-shadow: #324F72 5px 5px 5px;
   color: #fff;
   z-index: 999;
   position: absolute;
   display: none;
}

by stefan

// call the plugin inside dom ready event like this with default options
$(function() {
  $('a').tooltip()
});     

// or with custom options
$(function() {
  $('.tooltip_owner').tooltip({
    "position":"bottom left",
    fadeIn:true,
    fadeOut:true,
    fadeInSpeed: 300,
    fadeOutSpeed: 100,
  })
});

by stefan

tooltip

plugin js

css

page js