Advertisement
Guest User

jquery tooltip

a guest
Oct 20th, 2011
275
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * jQuery Tooltip plugin 1.3
  3.  *
  4.  * http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
  5.  * http://docs.jquery.com/Plugins/Tooltip
  6.  *
  7.  * Copyright (c) 2006 - 2008 Jörn Zaefferer
  8.  *
  9.  * $Id: jquery.tooltip.js 5741 2008-06-21 15:22:16Z joern.zaefferer $
  10.  *
  11.  * Dual licensed under the MIT and GPL licenses:
  12.  *   http://www.opensource.org/licenses/mit-license.php
  13.  *   http://www.gnu.org/licenses/gpl.html
  14.  */
  15.  
  16. ;(function($) {
  17.    
  18.         // the tooltip element
  19.     var helper = {},
  20.         // the current tooltipped element
  21.         current,
  22.         // the title of the current element, used for restoring
  23.         title,
  24.         // timeout id for delayed tooltips
  25.         tID,
  26.         // IE 5.5 or 6
  27.         IE = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent),
  28.         // flag for mouse tracking
  29.         track = false;
  30.    
  31.     $.tooltip = {
  32.         blocked: false,
  33.         defaults: {
  34.             delay: 200,
  35.             fade: false,
  36.             showURL: true,
  37.             extraClass: "",
  38.             top: 15,
  39.             left: 15,
  40.             id: "tooltip"
  41.         },
  42.         block: function() {
  43.             $.tooltip.blocked = !$.tooltip.blocked;
  44.         }
  45.     };
  46.    
  47.     $.fn.extend({
  48.         tooltip: function(settings) {
  49.             settings = $.extend({}, $.tooltip.defaults, settings);
  50.             createHelper(settings);
  51.             return this.each(function() {
  52.                     $.data(this, "tooltip", settings);
  53.                     this.tOpacity = helper.parent.css("opacity");
  54.                     // copy tooltip into its own expando and remove the title
  55.                     this.tooltipText = this.title;
  56.                     $(this).removeAttr("title");
  57.                     // also remove alt attribute to prevent default tooltip in IE
  58.                     this.alt = "";
  59.                 })
  60.                 .mouseover(save)
  61.                 .mouseout(hide)
  62.                 .click(hide);
  63.         },
  64.         fixPNG: IE ? function() {
  65.             return this.each(function () {
  66.                 var image = $(this).css('backgroundImage');
  67.                 if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) {
  68.                     image = RegExp.$1;
  69.                     $(this).css({
  70.                         'backgroundImage': 'none',
  71.                         'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
  72.                     }).each(function () {
  73.                         var position = $(this).css('position');
  74.                         if (position != 'absolute' && position != 'relative')
  75.                             $(this).css('position', 'relative');
  76.                     });
  77.                 }
  78.             });
  79.         } : function() { return this; },
  80.         unfixPNG: IE ? function() {
  81.             return this.each(function () {
  82.                 $(this).css({'filter': '', backgroundImage: ''});
  83.             });
  84.         } : function() { return this; },
  85.         hideWhenEmpty: function() {
  86.             return this.each(function() {
  87.                 $(this)[ $(this).html() ? "show" : "hide" ]();
  88.             });
  89.         },
  90.         url: function() {
  91.             return this.attr('href') || this.attr('src');
  92.         }
  93.     });
  94.    
  95.     function createHelper(settings) {
  96.         // there can be only one tooltip helper
  97.         if( helper.parent )
  98.             return;
  99.         // create the helper, h3 for title, div for url
  100.         helper.parent = $('<div id="' + settings.id + '"><h3></h3><div class="body"></div><div class="url"></div></div>')
  101.             // add to document
  102.             .appendTo(document.body)
  103.             // hide it at first
  104.             .hide();
  105.            
  106.         // apply bgiframe if available
  107.         if ( $.fn.bgiframe )
  108.             helper.parent.bgiframe();
  109.        
  110.         // save references to title and url elements
  111.         helper.title = $('h3', helper.parent);
  112.         helper.body = $('div.body', helper.parent);
  113.         helper.url = $('div.url', helper.parent);
  114.     }
  115.    
  116.     function settings(element) {
  117.         return $.data(element, "tooltip");
  118.     }
  119.    
  120.     // main event handler to start showing tooltips
  121.     function handle(event) {
  122.         // show helper, either with timeout or on instant
  123.         if( settings(this).delay )
  124.             tID = setTimeout(show, settings(this).delay);
  125.         else
  126.             show();
  127.        
  128.         // if selected, update the helper position when the mouse moves
  129.         track = !!settings(this).track;
  130.         $(document.body).bind('mousemove', update);
  131.            
  132.         // update at least once
  133.         update(event);
  134.     }
  135.    
  136.     // save elements title before the tooltip is displayed
  137.     function save() {
  138.         // if this is the current source, or it has no title (occurs with click event), stop
  139.         if ( $.tooltip.blocked || this == current || (!this.tooltipText && !settings(this).bodyHandler) )
  140.             return;
  141.  
  142.         // save current
  143.         current = this;
  144.         title = this.tooltipText;
  145.        
  146.         if ( settings(this).bodyHandler ) {
  147.             helper.title.hide();
  148.             var bodyContent = settings(this).bodyHandler.call(this);
  149.             if (bodyContent.nodeType || bodyContent.jquery) {
  150.                 helper.body.empty().append(bodyContent)
  151.             } else {
  152.                 helper.body.html( bodyContent );
  153.             }
  154.             helper.body.show();
  155.         } else if ( settings(this).showBody ) {
  156.             var parts = title.split(settings(this).showBody);
  157.             helper.title.html(parts.shift()).show();
  158.             helper.body.empty();
  159.             for(var i = 0, part; (part = parts[i]); i++) {
  160.                 if(i > 0)
  161.                     helper.body.append("<br/>");
  162.                 helper.body.append(part);
  163.             }
  164.             helper.body.hideWhenEmpty();
  165.         } else {
  166.             helper.title.html(title).show();
  167.             helper.body.hide();
  168.         }
  169.        
  170.         // if element has href or src, add and show it, otherwise hide it
  171.         if( settings(this).showURL && $(this).url() )
  172.             helper.url.html( $(this).url().replace('http://', '') ).show();
  173.         else
  174.             helper.url.hide();
  175.        
  176.         // add an optional class for this tip
  177.         helper.parent.addClass(settings(this).extraClass);
  178.  
  179.         // fix PNG background for IE
  180.         if (settings(this).fixPNG )
  181.             helper.parent.fixPNG();
  182.            
  183.         handle.apply(this, arguments);
  184.     }
  185.    
  186.     // delete timeout and show helper
  187.     function show() {
  188.         tID = null;
  189.         if ((!IE || !$.fn.bgiframe) && settings(current).fade) {
  190.             if (helper.parent.is(":animated"))
  191.                 helper.parent.stop().show().fadeTo(settings(current).fade, current.tOpacity);
  192.             else
  193.                 helper.parent.is(':visible') ? helper.parent.fadeTo(settings(current).fade, current.tOpacity) : helper.parent.fadeIn(settings(current).fade);
  194.         } else {
  195.             helper.parent.show();
  196.         }
  197.         update();
  198.     }
  199.    
  200.     /**
  201.      * callback for mousemove
  202.      * updates the helper position
  203.      * removes itself when no current element
  204.      */
  205.     function update(event)  {
  206.         if($.tooltip.blocked)
  207.             return;
  208.        
  209.         if (event && event.target.tagName == "OPTION") {
  210.             return;
  211.         }
  212.        
  213.         // stop updating when tracking is disabled and the tooltip is visible
  214.         if ( !track && helper.parent.is(":visible")) {
  215.             $(document.body).unbind('mousemove', update)
  216.         }
  217.        
  218.         // if no current element is available, remove this listener
  219.         if( current == null ) {
  220.             $(document.body).unbind('mousemove', update);
  221.             return;
  222.         }
  223.        
  224.         // remove position helper classes
  225.         helper.parent.removeClass("viewport-right").removeClass("viewport-bottom");
  226.        
  227.         var left = helper.parent[0].offsetLeft;
  228.         var top = helper.parent[0].offsetTop;
  229.         if (event) {
  230.             // position the helper 15 pixel to bottom right, starting from mouse position
  231.             left = event.pageX + settings(current).left;
  232.             top = event.pageY + settings(current).top;
  233.             var right='auto';
  234.             if (settings(current).positionLeft) {
  235.                 right = $(window).width() - left;
  236.                 left = 'auto';
  237.             }
  238.             helper.parent.css({
  239.                 left: left,
  240.                 right: right,
  241.                 top: top
  242.             });
  243.         }
  244.        
  245.         var v = viewport(),
  246.             h = helper.parent[0];
  247.         // check horizontal position
  248.         if (v.x + v.cx < h.offsetLeft + h.offsetWidth) {
  249.             left -= h.offsetWidth + 20 + settings(current).left;
  250.             helper.parent.css({left: left + 'px'}).addClass("viewport-right");
  251.         }
  252.         // check vertical position
  253.         if (v.y + v.cy < h.offsetTop + h.offsetHeight) {
  254.             top -= h.offsetHeight + 20 + settings(current).top;
  255.             helper.parent.css({top: top + 'px'}).addClass("viewport-bottom");
  256.         }
  257.     }
  258.    
  259.     function viewport() {
  260.         return {
  261.             x: $(window).scrollLeft(),
  262.             y: $(window).scrollTop(),
  263.             cx: $(window).width(),
  264.             cy: $(window).height()
  265.         };
  266.     }
  267.    
  268.     // hide helper and restore added classes and the title
  269.     function hide(event) {
  270.         if($.tooltip.blocked)
  271.             return;
  272.         // clear timeout if possible
  273.         if(tID)
  274.             clearTimeout(tID);
  275.         // no more current element
  276.         current = null;
  277.        
  278.         var tsettings = settings(this);
  279.         function complete() {
  280.             helper.parent.removeClass( tsettings.extraClass ).hide().css("opacity", "");
  281.         }
  282.         if ((!IE || !$.fn.bgiframe) && tsettings.fade) {
  283.             if (helper.parent.is(':animated'))
  284.                 helper.parent.stop().fadeTo(tsettings.fade, 0, complete);
  285.             else
  286.                 helper.parent.stop().fadeOut(tsettings.fade, complete);
  287.         } else
  288.             complete();
  289.        
  290.         if( settings(this).fixPNG )
  291.             helper.parent.unfixPNG();
  292.     }
  293.    
  294. })(jQuery);
  295.  
  296.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement