include/tooltip.js

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