[Summary view] [Print] [Text view]

   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,v 1.1.1.1 2009-03-17 18:35:18 kannan Exp $
  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);