[Summary view] [Print] [Text view]

   1  /* This notice must be untouched at all times.
   2  
   3  wz_tooltip.js    v. 3.31
   4  
   5  The latest version is available at
   6  http://www.walterzorn.com
   7  or http://www.devira.com
   8  or http://www.walterzorn.de
   9  
  10  Copyright (c) 2002-2004 Walter Zorn. All rights reserved.
  11  Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
  12  Last modified: 22. 6. 2005
  13  
  14  Cross-browser tooltips working even in Opera 5 and 6,
  15  as well as in NN 4, Gecko-Browsers, IE4+, Opera 7 and Konqueror.
  16  No onmouseouts required.
  17  Appearance of tooltips can be individually configured
  18  via commands within the onmouseovers.
  19  
  20  LICENSE: LGPL
  21  
  22  This library is free software; you can redistribute it and/or
  23  modify it under the terms of the GNU Lesser General Public
  24  License (LGPL) as published by the Free Software Foundation; either
  25  version 2.1 of the License, or (at your option) any later version.
  26  
  27  This library is distributed in the hope that it will be useful,
  28  but WITHOUT ANY WARRANTY; without even the implied warranty of
  29  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
  30  
  31  For more details on the GNU Lesser General Public License,
  32  see http://www.gnu.org/copyleft/lesser.html
  33  */
  34  
  35  
  36  
  37  ////////////////  GLOBAL TOOPTIP CONFIGURATION  /////////////////////
  38  var ttBgColor      = "#e6ecff";
  39  var ttBgImg        = "";           // path to background image;
  40  var ttBorderColor  = "#003399";
  41  var ttBorderWidth  = 1;
  42  var ttDelay        = 500;          // time span until tooltip shows up [milliseconds]
  43  var ttFontColor    = "#000066";
  44  var ttFontFace     = "arial,helvetica,sans-serif";
  45  var ttFontSize     = "11px";
  46  var ttFontWeight   = "normal";     // alternative is "bold";
  47  var ttOffsetX      = 12;            // horizontal offset of left-top corner from mousepointer
  48  var ttOffsetY      = 15;           // vertical offset                   "
  49  var ttOpacity      = 100;          // opacity of tooltip in percent (must be integer between 0 and 100)
  50  var ttPadding      = 3;            // spacing between border and content
  51  var ttShadowColor  = "";
  52  var ttShadowWidth  = 0;
  53  var ttTemp         = 0;            // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
  54  var ttTextAlign    = "left";
  55  var ttTitleColor   = "#ffffff";    // color of caption text
  56  var ttWidth        = 300;
  57  ////////////////////  END OF TOOLTIP CONFIG  ////////////////////////
  58  
  59  
  60  
  61  //////////////  TAGS WITH TOOLTIP FUNCTIONALITY  ////////////////////
  62  // List may be extended or shortened:
  63  var tt_tags = new Array("a","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s","small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
  64  /////////////////////////////////////////////////////////////////////
  65  
  66  
  67  
  68  ///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
  69  var tt_obj,                // current tooltip
  70  tt_ifrm,                   // iframe to cover windowed controls in IE
  71  tt_objW = 0, tt_objH = 0,  // width and height of tt_obj
  72  tt_objX = 0, tt_objY = 0,
  73  tt_offX = 0, tt_offY = 0,
  74  xlim = 0, ylim = 0,        // right and bottom borders of visible client area
  75  tt_sup = false,            // true if T_ABOVE cmd
  76  tt_sticky = false,         // tt_obj sticky?
  77  tt_wait = false,
  78  tt_act = false,            // tooltip visibility flag
  79  tt_sub = false,            // true while tooltip below mousepointer
  80  tt_u = "undefined",
  81  tt_mf,                     // stores previous mousemove evthandler
  82  // Opera: disable href when hovering <a>
  83  tt_tag = null;             // stores hovered dom node, href and previous statusbar txt
  84  
  85  
  86  var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null,
  87  tt_n = navigator.userAgent.toLowerCase(),
  88  tt_nv = navigator.appVersion;
  89  // Browser flags
  90  var tt_op = !!(window.opera && document.getElementById),
  91  tt_op6 = tt_op && !document.defaultView,
  92  tt_op7 = tt_op && !tt_op6,
  93  tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op,
  94  tt_ie6 = tt_ie && parseFloat(tt_nv.substring(tt_nv.indexOf("MSIE")+5)) >= 5.5;
  95  tt_n4 = (document.layers && typeof document.classes != tt_u),
  96  tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u),
  97  tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;
  98  
  99  function tt_Int(t_x)
 100  {
 101      var t_y;
 102      return isNaN(t_y = parseInt(t_x))? 0 : t_y;
 103  }
 104  function wzReplace(t_x, t_y)
 105  {
 106      var t_ret = "",
 107      t_str = this,
 108      t_xI;
 109      while((t_xI = t_str.indexOf(t_x)) != -1)
 110      {
 111          t_ret += t_str.substring(0, t_xI) + t_y;
 112          t_str = t_str.substring(t_xI + t_x.length);
 113      }
 114      return t_ret+t_str;
 115  }
 116  String.prototype.wzReplace = wzReplace;
 117  function tt_N4Tags(tagtyp, t_d, t_y)
 118  {
 119      t_d = t_d || document;
 120      t_y = t_y || new Array();
 121      var t_x = (tagtyp=="a")? t_d.links : t_d.layers;
 122      for(var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
 123      for(z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
 124      return t_y;
 125  }
 126  function tt_Htm(tt, t_id, txt)
 127  {
 128      var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
 129      t_bgimg   = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
 130      t_bc      = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
 131      t_bw      = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
 132      t_ff      = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
 133      t_fc      = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
 134      t_fsz     = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
 135      t_fwght   = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
 136      t_opa     = (typeof tt.T_OPACITY != tt_u)? tt.T_OPACITY : ttOpacity,
 137      t_padd    = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
 138      t_shc     = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
 139      t_shw     = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
 140      t_algn    = (typeof tt.T_TEXTALIGN != tt_u)? tt.T_TEXTALIGN : ttTextAlign,
 141      t_tit     = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : "",
 142      t_titc    = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
 143      t_w       = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH  : ttWidth;
 144      if (t_shc || t_shw)
 145      {
 146          t_shc = t_shc || "#cccccc";
 147          t_shw = t_shw || 5;
 148      }
 149      if (tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px";
 150  
 151      var t_optx = (tt_n4? '' : tt_n6? ('-moz-opacity:'+(t_opa/100.0)) : tt_ie? ('filter:Alpha(opacity='+t_opa+')') : ('opacity:'+(t_opa/100.0))) + ';';
 152      var t_y = '<div id="'+t_id+'" style="position:absolute;z-index:1010;';
 153      t_y += 'left:0px;top:0px;width:'+(t_w+t_shw)+'px;visibility:'+(tt_n4? 'hide' : 'hidden')+';'+t_optx+'">' +
 154          '<table border="0" cellpadding="0" cellspacing="0"'+(t_bc? (' bgcolor="'+t_bc+'"') : '')+' width="'+t_w+'">';
 155      if (t_tit)
 156      {
 157          t_y += '<tr><td style="padding-left:3px;padding-right:3px;" align="'+t_algn+'"><font color="'+t_titc+'" face="'+t_ff+'" ' +
 158              'style="color:'+t_titc+';font-family:'+t_ff+';font-size:'+t_fsz+';"><b>' +
 159              (tt_n4? '&nbsp;' : '')+t_tit+'<\/b><\/font><\/td><\/tr>';
 160      }
 161      t_y += '<tr><td><table border="0" cellpadding="'+t_padd+'" cellspacing="'+t_bw+'" width="100%">' +
 162          '<tr><td'+(t_bgc? (' bgcolor="'+t_bgc+'"') : '')+(t_bgimg? ' background="'+t_bgimg+'"' : '')+' style="text-align:'+t_algn+';';
 163      if (tt_n6) t_y += 'padding:'+t_padd+'px;';
 164      t_y += '" align="'+t_algn+'"><font color="'+t_fc+'" face="'+t_ff+'"' +
 165          ' style="color:'+t_fc+';font-family:'+t_ff+';font-size:'+t_fsz+';font-weight:'+t_fwght+';">';
 166      if (t_fwght == 'bold') t_y += '<b>';
 167      t_y += txt;
 168      if (t_fwght == 'bold') t_y += '<\/b>';
 169      t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>';
 170      if (t_shw)
 171      {
 172          var t_spct = Math.round(t_shw*1.3);
 173          if (tt_n4)
 174          {
 175              t_y += '<layer bgcolor="'+t_shc+'" left="'+t_w+'" top="'+t_spct+'" width="'+t_shw+'" height="0"><\/layer>' +
 176                  '<layer bgcolor="'+t_shc+'" left="'+t_spct+'" align="bottom" width="'+(t_w-t_spct)+'" height="'+t_shw+'"><\/layer>';
 177          }
 178          else
 179          {
 180              t_optx = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : 'opacity:0.85;';
 181              t_y += '<div id="'+t_id+'R" style="position:absolute;background:'+t_shc+';left:'+t_w+'px;top:'+t_spct+'px;width:'+t_shw+'px;height:1px;overflow:hidden;'+t_optx+'"><\/div>' +
 182                  '<div style="position:relative;background:'+t_shc+';left:'+t_spct+'px;top:0px;width:'+(t_w-t_spct)+'px;height:'+t_shw+'px;overflow:hidden;'+t_optx+'"><\/div>';
 183          }
 184      }
 185      return(t_y+'<\/div>' +
 186          (tt_ie ? '<iframe id="TTiEiFrM" src="javascript:false" scrolling="no" frameborder="0" style="filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;display:none;"><\/iframe>' : ''));
 187  }
 188  function tt_EvX(t_e)
 189  {
 190      var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
 191          tt_Int(tt_ie? tt_db.scrollLeft : 0) +
 192          tt_offX;
 193      if (t_y > xlim) t_y = xlim;
 194      var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
 195      if (t_y < t_scr) t_y = t_scr;
 196      return t_y;
 197  }
 198  function tt_EvY(t_e)
 199  {
 200      var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
 201          tt_Int(tt_ie? tt_db.scrollTop : 0);
 202      if (tt_sup) t_y -= (tt_objH + tt_offY - 15);
 203      else if (t_y > ylim || !tt_sub && t_y > ylim-24)
 204      {
 205          t_y -= (tt_objH + 5);
 206          tt_sub = false;
 207      }
 208      else
 209      {
 210          t_y += tt_offY;
 211          tt_sub = true;
 212      }
 213      return t_y;
 214  }
 215  function tt_ReleasMov()
 216  {
 217      if (document.onmousemove == tt_Move)
 218      {
 219          if (!tt_mf && document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
 220          document.onmousemove = tt_mf;
 221      }
 222  }
 223  function tt_ShowIfrm(t_x)
 224  {
 225      if (!tt_ie6 || !tt_obj) return;
 226      tt_ifrm = document.getElementById("TTiEiFrM");
 227      //tt_obj.style.display = t_x? "block" : "none";
 228      if (t_x)
 229      {
 230          tt_ifrm.style.width = tt_objW+'px';
 231          tt_ifrm.style.height = tt_objH+'px';
 232          tt_ifrm.style.zIndex = tt_obj.style.zIndex - 1;
 233          tt_ifrm.style.display = "block";
 234      }
 235      else tt_ifrm.style.display = "none";
 236  }
 237  function tt_GetDiv(t_id)
 238  {
 239      return(
 240          tt_n4? (document.layers[t_id] || null)
 241          : tt_ie? (document.all[t_id] || null)
 242          : (document.getElementById(t_id) || null)
 243      );
 244  }
 245  function tt_GetDivW()
 246  {
 247      return tt_Int(
 248          tt_n4? tt_obj.clip.width
 249          : (tt_obj.style.pixelWidth || tt_obj.offsetWidth)
 250      );
 251  }
 252  function tt_GetDivH()
 253  {
 254      return tt_Int(
 255          tt_n4? tt_obj.clip.height
 256          : (tt_obj.style.pixelHeight || tt_obj.offsetHeight)
 257      );
 258  }
 259  
 260  // Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
 261  function tt_SetDivZ()
 262  {
 263      var t_i = tt_obj.style || tt_obj;
 264      if (window.dd && dd.z)
 265          t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
 266  }
 267  function tt_SetDivPos(t_x, t_y)
 268  {
 269      var t_i = tt_obj.style || tt_obj;
 270      var t_px = (tt_op6 || tt_n4)? '' : 'px';
 271      t_i.left = (tt_objX = t_x) + t_px;
 272      t_i.top = (tt_objY = t_y) + t_px;
 273      if (tt_ifrm)
 274      {
 275          tt_ifrm.style.left = t_i.left;
 276          tt_ifrm.style.top = t_i.top;
 277      }
 278  }
 279  function tt_ShowDiv(t_x)
 280  {
 281      if (tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
 282      else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
 283      tt_act = t_x;
 284      tt_ShowIfrm(t_x);
 285  }
 286  function tt_OpDeHref(t_e)
 287  {
 288      if (t_e && t_e.target.hasAttribute("href"))
 289      {
 290          tt_tag = t_e.target;
 291          tt_tag.t_href = tt_tag.getAttribute("href");
 292          tt_tag.removeAttribute("href");
 293          tt_tag.style.cursor = "hand";
 294          tt_tag.onmousedown = tt_OpReHref;
 295          tt_tag.stats = window.status;
 296          window.status = tt_tag.t_href;
 297      }
 298  }
 299  function tt_OpReHref()
 300  {
 301      if (tt_tag)
 302      {
 303          tt_tag.setAttribute("href", tt_tag.t_href);
 304          window.status = tt_tag.stats;
 305          tt_tag = null;
 306      }
 307  }
 308  function tt_Show(t_e, t_id, t_sup, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky, t_temp)
 309  {
 310      if (tt_obj) tt_Hide();
 311      tt_mf = document.onmousemove || null;
 312      if (window.dd && (window.DRAG && tt_mf == DRAG || window.RESIZE && tt_mf == RESIZE)) return;
 313      var t_uf = document.onmouseup || null, t_sh, t_h;
 314      if (tt_mf && t_uf) t_uf(t_e);
 315  
 316      tt_obj = tt_GetDiv(t_id);
 317      if (tt_obj)
 318      {
 319          t_e = t_e || window.event;
 320          tt_sub = !(tt_sup = t_sup);
 321          tt_sticky = t_sticky;
 322          tt_objW = tt_GetDivW();
 323          tt_objH = tt_GetDivH();
 324          tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
 325          tt_offY = t_offy;
 326          if (tt_op7) tt_OpDeHref(t_e);
 327          if (tt_n4)
 328          {
 329              if (tt_obj.document.layers.length)
 330              {
 331                  t_sh = tt_obj.document.layers[0];
 332                  t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
 333              }
 334          }
 335          else
 336          {
 337              t_sh = tt_GetDiv(t_id+'R');
 338              if (t_sh)
 339              {
 340                  t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
 341                  if (typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
 342                  else t_sh.style.height = t_h+'px';
 343              }
 344          }
 345  
 346          xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
 347              tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
 348              tt_objW -
 349              (tt_n4? 21 : 0);
 350          ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
 351              tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
 352              tt_objH - tt_offY;
 353  
 354          tt_SetDivZ();
 355          if (t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
 356          else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 357  
 358          var t_txt = 'tt_ShowDiv(\'true\');';
 359          if (t_sticky) t_txt += '{'+
 360                  'tt_ReleasMov();'+
 361                  'window.tt_upFunc = document.onmouseup || null;'+
 362                  'if (document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
 363                  'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
 364              '}';
 365          else if (t_static) t_txt += 'tt_ReleasMov();';
 366          if (t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
 367          window.tt_rdl = window.setTimeout(t_txt, t_delay);
 368  
 369          if (!t_fix)
 370          {
 371              if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
 372              document.onmousemove = tt_Move;
 373          }
 374      }
 375  }
 376  var tt_area = false;
 377  function tt_Move(t_ev)
 378  {
 379      if (!tt_obj) return;
 380      if (tt_n6 || tt_w3c)
 381      {
 382          if (tt_wait) return;
 383          tt_wait = true;
 384          setTimeout('tt_wait = false;', 5);
 385      }
 386      var t_e = t_ev || window.event;
 387      tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
 388      if (tt_op6)
 389      {
 390          if (tt_area && t_e.target.tagName != 'AREA') tt_Hide();
 391          else if (t_e.target.tagName == 'AREA') tt_area = true;
 392      }
 393  }
 394  function tt_Hide()
 395  {
 396      if (window.tt_obj)
 397      {
 398          if (window.tt_rdl) window.clearTimeout(tt_rdl);
 399          if (!tt_sticky || !tt_act)
 400          {
 401              if (window.tt_rtm) window.clearTimeout(tt_rtm);
 402              tt_ShowDiv(false);
 403              tt_SetDivPos(-tt_objW, -tt_objH);
 404              tt_obj = null;
 405              if (typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
 406          }
 407          tt_sticky = false;
 408          if (tt_op6 && tt_area) tt_area = false;
 409          tt_ReleasMov();
 410          if (tt_op7) tt_OpReHref();
 411      }
 412  }
 413  function tt_Init()
 414  {
 415      if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;
 416  
 417      var htm = tt_n4? '<div style="position:absolute;"><\/div>' : '',
 418      tags,
 419      t_tj,
 420      over,
 421      esc = 'return escape(';
 422      var i = tt_tags.length; while(i--)
 423      {
 424          tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
 425              : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
 426              : (!tt_n4 && tt_tags[i]=="a")? document.links
 427              : 1;
 428          if (tt_n4 && (tt_tags[i] == "a" || tt_tags[i] == "layer")) tags = tt_N4Tags(tt_tags[i]);
 429          var j = tags.length; while(j--)
 430          {
 431              if (typeof (t_tj = tags[j]).onmouseover == "function" && t_tj.onmouseover.toString().indexOf(esc) != -1 && !tt_n6 || tt_n6 && (over = t_tj.getAttribute("onmouseover")) && over.indexOf(esc) != -1)
 432              {
 433                  if (over) t_tj.onmouseover = new Function(over);
 434                  var txt = unescape(t_tj.onmouseover());
 435                  htm += tt_Htm(
 436                      t_tj,
 437                      "tOoLtIp"+i+""+j,
 438                      txt.wzReplace("& ","&")
 439                  );
 440  
 441                  t_tj.onmouseover = new Function('e',
 442                      'tt_Show(e,'+
 443                      '"tOoLtIp' +i+''+j+ '",'+
 444                      (typeof t_tj.T_ABOVE != tt_u)+','+
 445                      ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay)+','+
 446                      ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""')+','+
 447                      (typeof t_tj.T_LEFT != tt_u)+','+
 448                      ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX)+','+
 449                      ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY)+','+
 450                      (typeof t_tj.T_STATIC != tt_u)+','+
 451                      (typeof t_tj.T_STICKY != tt_u)+','+
 452                      ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
 453                      ');'
 454                  );
 455                  t_tj.onmouseout = tt_Hide;
 456                  if (t_tj.alt) t_tj.alt = "";
 457                  if (t_tj.title) t_tj.title = "";
 458              }
 459          }
 460      }
 461      document.write(htm);
 462  }
 463  tt_Init();