tooltip.js

   1 /*
   2 Description:
   3
   4         jQuery ToolTip Demo. Demo of how to add elements and get mouse coordinates
   5         There is also a ToolTip plugin found at http://www.eyecon.ro/interface/,
   6           which uses a CSS class to style the tooltip, but shows it below the input/anchor, rather than where the mouse is
   7
   8 Usage:
   9
  10         $(window).load(
  11                 function()
  12                 {
  13                         $("a,input").ToolTipDemo('#fff');
  14                 }
  15         );
  16
  17 Parameters:
  18
  19         bgcolour : Background colour
  20 */
  21 $.fn.ToolTipDemo = function(bgcolour)
  22 {
  23         this.mouseover(
  24                 function(e)
  25                 {
  26                         if((!this.title && !this.alt) && !this.tooltipset) return;
  27                         // get mouse coordinates
  28                         // based on code from http://www.quirksmode.org/js/events_properties.html
  29                         var mouseX = e.pageX || (e.clientX ? e.clientX + document.body.scrollLeft : 0);
  30                         var mouseY = e.pageY || (e.clientY ? e.clientY + document.body.scrollTop : 0);
  31                         mouseX += 10;
  32                         mouseY += 10;
  33                         bgcolour = bgcolour || "#eee";
  34                         // if there is no sibling after this one, or the next siblings className is not tooltipdemo
  35                         if(!this.nextSibling || this.nextSibling.className != "tooltipdemo")
  36                         {
  37                                 // create a div and style it
  38                                 var div = document.createElement("div");
  39                                 $(div).css(
  40                                 {
  41                                         border: "2px outset #ddd",
  42                                         padding: "2px",
  43                                         backgroundColor: bgcolour,
  44                                         position: "absolute"
  45                                 })
  46                                 // add the title/alt attribute to it
  47                                 .html((this.title || this.alt)).addClass("tooltipdemo");
  48                                 this.title = "";
  49                                 this.alt = "";
  50                                 if(this.nextSibling)
  51                                 {
  52                                         this.parentNode.insertBefore(div, this.nextSibling);
  53                                 }
  54                                 else
  55                                 {
  56                                         this.parentNode.appendChild(div);
  57                                 }
  58                                 this.tooltipset = true;
  59                         }
  60                         $(this.nextSibling).show().css({left: mouseX + "px", top: mouseY + 3 + "px"});
  61                 }
  62         ).mouseout(
  63                 function()
  64                 {
  65                         if(this.nextSibling && this.nextSibling.className == "tooltipdemo")
  66                         {
  67                                 $(this.nextSibling).hide();
  68                         }
  69                 }
  70         );
  71         return this;
  72 }