libs/tooltip.js

   1 /*\r
   2  +-------------------------------------------------------------------+\r
   3  |                   J S - T O O L T I P   (v2.1)                    |\r
   4  |                                                                   |\r
   5  | Copyright Gerd Tentler                www.gerd-tentler.de/tools   |\r
   6  | Created: Feb. 15, 2005                Last modified: Apr. 9, 2007 |\r
   7  +-------------------------------------------------------------------+\r
   8  | This program may be used and hosted free of charge by anyone for  |\r
   9  | personal purpose as long as this copyright notice remains intact. |\r
  10  |                                                                   |\r
  11  | Obtain permission before selling the code for this program or     |\r
  12  | hosting this software on a commercial website or redistributing   |\r
  13  | this software over the Internet or in any other medium. In all    |\r
  14  | cases copyright must remain intact.                               |\r
  15  +-------------------------------------------------------------------+\r
  16 \r
  17 ======================================================================================================\r
  18 \r
  19  This script was tested with the following systems and browsers:\r
  20 \r
  21  - Windows XP: IE 6, NN 7, Opera 7 + 9, Firefox 2\r
  22  - Mac OS X:   IE 5, Safari 1\r
  23 \r
  24  If you use another browser or system, this script may not work for you - sorry.\r
  25 \r
  26 ------------------------------------------------------------------------------------------------------\r
  27 \r
  28  USAGE:\r
  29 \r
  30  Use the toolTip-function with mouse-over and mouse-out events (see example below).\r
  31 \r
  32  - To show a tooltip, use this syntax: toolTip(text, width in pixels, opacity in percent)\r
  33    Note: width and opacity are optional. Opacity is not supported by all browsers.\r
  34 \r
  35  - To hide a tooltip, use this syntax: toolTip()\r
  36 \r
  37 ------------------------------------------------------------------------------------------------------\r
  38 \r
  39  EXAMPLE:\r
  40 \r
  41  <a href="#" onMouseOver="toolTip('Just a test', 150)" onMouseOut="toolTip()">some text here</a>\r
  42 \r
  43 ======================================================================================================\r
  44 */\r
  45 \r
  46 var OP = (navigator.userAgent.indexOf('Opera') != -1);\r
  47 var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP);\r
  48 var GK = (navigator.userAgent.indexOf('Gecko') != -1);\r
  49 var SA = (navigator.userAgent.indexOf('Safari') != -1);\r
  50 var DOM = document.getElementById;\r
  51 \r
  52 var tooltip = null;\r
  53 \r
  54 function TOOLTIP() {\r
  55 //----------------------------------------------------------------------------------------------------\r
  56 // Configuration\r
  57 //----------------------------------------------------------------------------------------------------\r
  58   this.width = 400;                     // width (pixels)\r
  59   this.bgColor = "#FFFFFF";             // background color\r
  60   this.textFont = "Comic Sans MS";      // text font family\r
  61   this.textSize = 14;                   // text font size (pixels)\r
  62   this.textColor = "#000000";           // text color\r
  63   this.border = "1px dashed #E0E6FF";   // border (CSS spec: size style color, e.g. "1px solid #D00000")\r
  64   this.opacity = 80;                    // opacity (0 - 100); not supported by all browsers\r
  65   this.cursorDistance = 5;              // distance from mouse cursor (pixels)\r
  66 \r
  67   // don't change\r
  68   this.text = '';\r
  69   this.height = 0;\r
  70   this.obj = null;\r
  71   this.active = false;\r
  72 \r
  73 //----------------------------------------------------------------------------------------------------\r
  74 // Methods\r
  75 //----------------------------------------------------------------------------------------------------\r
  76   this.create = function() {\r
  77     if(!this.obj) this.init();\r
  78   \r
  79     var s = (this.textFont ? 'font-family:' + this.textFont + '; ' : '') +\r
  80             (this.textSize ? 'font-size:' + this.textSize + 'px; ' : '') +\r
  81             (this.border ? 'border:' + this.border + '; ' : '') +\r
  82             (this.textColor ? 'color:' + this.textColor + '; ' : '');\r
  83 \r
  84     var t = '<table border="0" cellspacing="0" cellpadding="4" width="' + this.width + 'px"><tr>' +\r
  85             '<td align="center"' + (s ? ' style="' + s + '"' : '') + '>' + this.text +\r
  86             '</td></tr></table>';\r
  87 \r
  88     if(DOM || IE) this.obj.innerHTML = t;\r
  89     if(DOM) this.height = this.obj.offsetHeight;\r
  90     else if(IE) this.height = this.obj.style.pixelHeight;\r
  91     if(this.bgColor) this.obj.style.backgroundColor = this.bgColor;\r
  92 \r
  93     this.setOpacity();\r
  94     this.move();\r
  95     this.show();\r
  96   }\r
  97 \r
  98   this.init = function() {\r
  99     if(DOM) this.obj = document.getElementById('ToolTip');\r
 100     else if(IE) this.obj = document.all.ToolTip;\r
 101   }\r
 102 \r
 103   this.move = function() {\r
 104     var winX = getWinX() - (((GK && !SA) || OP) ? 17 : 0);\r
 105     var winY = getWinY() - (((GK && !SA) || OP) ? 17 : 0);\r
 106     var x = mouseX;\r
 107     var y = mouseY;\r
 108 \r
 109     if(x + this.width + this.cursorDistance > winX + getScrX())\r
 110       x -= this.width + this.cursorDistance;\r
 111     else x += this.cursorDistance;\r
 112 \r
 113     if(y + this.height + this.cursorDistance > winY + getScrY())\r
 114       y -= this.height;\r
 115     else y += this.cursorDistance;\r
 116 \r
 117     this.obj.style.left = x + 'px';\r
 118     this.obj.style.top = y + 'px';\r
 119   }\r
 120 \r
 121   this.show = function() {\r
 122     this.obj.style.zIndex = 69;\r
 123     this.active = true;\r
 124     this.obj.style.visibility = 'visible';\r
 125   }\r
 126 \r
 127   this.hide = function() {\r
 128     this.obj.style.zIndex = -1;\r
 129     this.active = false;\r
 130     this.obj.style.visibility = 'hidden';\r
 131   }\r
 132 \r
 133   this.setOpacity = function() {\r
 134     this.obj.style.opacity = this.opacity / 100;\r
 135     this.obj.style.MozOpacity = this.opacity / 100;\r
 136     this.obj.style.KhtmlOpacity = this.opacity / 100;\r
 137     this.obj.style.filter = 'alpha(opacity=' + this.opacity + ')';\r
 138   }\r
 139 }\r
 140 \r
 141 //----------------------------------------------------------------------------------------------------\r
 142 // Global functions\r
 143 //----------------------------------------------------------------------------------------------------\r
 144 function getScrX() {\r
 145   var offset = 0;\r
 146   if(window.pageXOffset)\r
 147     offset = window.pageXOffset;\r
 148   else if(document.documentElement && document.documentElement.scrollLeft)\r
 149     offset = document.documentElement.scrollLeft;\r
 150   else if(document.body && document.body.scrollLeft)\r
 151     offset = document.body.scrollLeft;\r
 152   return offset;\r
 153 }\r
 154 \r
 155 function getScrY() {\r
 156   var offset = 0;\r
 157   if(window.pageYOffset)\r
 158     offset = window.pageYOffset;\r
 159   else if(document.documentElement && document.documentElement.scrollTop)\r
 160     offset = document.documentElement.scrollTop;\r
 161   else if(document.body && document.body.scrollTop)\r
 162     offset = document.body.scrollTop;\r
 163   return offset;\r
 164 }\r
 165 \r
 166 function getWinX() {\r
 167   var size = 0;\r
 168   if(window.innerWidth)\r
 169     size = window.innerWidth;\r
 170   else if(document.documentElement && document.documentElement.clientWidth)\r
 171     size = document.documentElement.clientWidth;\r
 172   else if(document.body && document.body.clientWidth)\r
 173     size = document.body.clientWidth;\r
 174   else size = screen.width;\r
 175   return size;\r
 176 }\r
 177 \r
 178 function getWinY() {\r
 179   var size = 0;\r
 180   if(window.innerHeight)\r
 181     size = window.innerHeight;\r
 182   else if(document.documentElement && document.documentElement.clientHeight)\r
 183     size = document.documentElement.clientHeight;\r
 184   else if(document.body && document.body.clientHeight)\r
 185     size = document.body.clientHeight;\r
 186   else size = screen.height;\r
 187   return size;\r
 188 }\r
 189 \r
 190 function getMouseXY(e) {\r
 191   if(e && e.pageX != null) {\r
 192     mouseX = e.pageX;\r
 193     mouseY = e.pageY;\r
 194   }\r
 195   else if(event && event.clientX != null) {\r
 196     mouseX = event.clientX + getScrX();\r
 197     mouseY = event.clientY + getScrY();\r
 198   }\r
 199   if(mouseX < 0) mouseX = 0;\r
 200   if(mouseY < 0) mouseY = 0;\r
 201   if(tooltip && tooltip.active) tooltip.move();\r
 202 }\r
 203 \r
 204 function toolTip(text, width, opacity) {\r
 205   if(text) {\r
 206     tooltip = new TOOLTIP();\r
 207     tooltip.text = text;\r
 208     if(width) tooltip.width = width;\r
 209     if(opacity) tooltip.opacity = opacity;\r
 210     tooltip.create();\r
 211   }\r
 212   else if(tooltip) tooltip.hide();\r
 213 }\r
 214 \r
 215 //----------------------------------------------------------------------------------------------------\r
 216 // Build tooltip box\r
 217 //----------------------------------------------------------------------------------------------------\r
 218 document.write('<div id="ToolTip" style="position:absolute; visibility:hidden"></div>');\r
 219 \r
 220 //----------------------------------------------------------------------------------------------------\r
 221 // Event handlers\r
 222 //----------------------------------------------------------------------------------------------------\r
 223 var mouseX = mouseY = 0;\r
 224 document.onmousemove = getMouseXY;\r
 225 \r
 226 //----------------------------------------------------------------------------------------------------\r