vpToolTip

Tooltip code for converting attributes into tooltips on hover.

by laustdeleuran

JavaScript

// Tooltip
(function( $ ){
  $.fn.vpToolTip = function(options) {
    var settings = {
      'attr':'title',
      'content':false,
      'cssClass':false,
      'offset':{'x':15,'y':15}
    };
    return this.each(function(){
      // Merge options
      if (options) { 
        $.extend(settings, options);
      }
      
      // Safeguard native tooltip
      if (settings.attr == 'title') settings.attr = 'data-vptooltip-title';
      if ($(this).attr('title')) $(this).attr('data-vptooltip-title',$(this).attr('title'))
      
      // Add in /out events
      $(this).hover(function(){
        $(this).removeAttr('title');
        var content = settings.content ? settings.content : $(this).attr(settings.attr) ;
        $('<div id="vp-tooltip">' + content + '</div>').css('position','absolute').appendTo('body').addClass(settings.cssClass);
      },function(){
        if ($(this).attr('data-vptooltip-title')) $(this).attr('title',$(this).attr('data-vptooltip-title'))
        $('#vp-tooltip').remove();
      });
      
      // Update position
      $(this).mousemove(function(e){
        $('#vp-tooltip').css({'top':e.pageY+settings.offset.y,'left':e.pageX+settings.offset.x});
      });
    });
  };
})( jQuery );