1 /* This notice must be untouched at all times.
5 The latest version is available at
6 http://www.walterzorn.com
7 or http://www.devira.com
8 or http://www.walterzorn.de
10 Copyright (c) 2002-2005 Walter Zorn. All rights reserved.
11 Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
12 Last modified: 9. 12. 2005
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.
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.
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.
31 For more details on the GNU Lesser General Public License,
32 see http://www.gnu.org/copyleft/lesser.html
37 //////////////// GLOBAL TOOPTIP CONFIGURATION /////////////////////
38 var ttAbove = false; // tooltip above mousepointer? Alternative: true
39 var ttBgColor = "#e6ecff";
40 var ttBgImg = ""; // path to background image;
41 var ttBorderColor = "#003399";
42 var ttBorderWidth = 1;
43 var ttDelay = 500; // time span until tooltip shows up [milliseconds]
44 var ttFontColor = "#000066";
45 var ttFontFace = "arial,helvetica,sans-serif";
46 var ttFontSize = "11px";
47 var ttFontWeight = "normal"; // alternative: "bold";
48 var ttLeft = false; // tooltip on the left of the mouse? Alternative: true
49 var ttOffsetX = 12; // horizontal offset of left-top corner from mousepointer
50 var ttOffsetY = 15; // vertical offset "
51 var ttOpacity = 100; // opacity of tooltip in percent (must be integer between 0 and 100)
52 var ttPadding = 3; // spacing between border and content
53 var ttShadowColor = "";
54 var ttShadowWidth = 0;
55 var ttStatic = false; // tooltip NOT move with the mouse? Alternative: true
56 var ttSticky = false; // do NOT hide tooltip on mouseout? Alternative: true
57 var ttTemp = 0; // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
58 var ttTextAlign = "left";
59 var ttTitleColor = "#ffffff"; // color of caption text
61 //////////////////// END OF TOOLTIP CONFIG ////////////////////////
65 ////////////// TAGS WITH TOOLTIP FUNCTIONALITY ////////////////////
66 // List may be extended or shortened:
67 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", "select", "small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
68 /////////////////////////////////////////////////////////////////////
72 ///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
73 var tt_obj = null, // current tooltip
74 tt_ifrm = null, // iframe to cover windowed controls in IE
75 tt_objW = 0, tt_objH = 0, // width and height of tt_obj
76 tt_objX = 0, tt_objY = 0,
77 tt_offX = 0, tt_offY = 0,
78 xlim = 0, ylim = 0, // right and bottom borders of visible client area
79 tt_sup = false, // true if T_ABOVE cmd
80 tt_sticky = false, // tt_obj sticky?
82 tt_act = false, // tooltip visibility flag
83 tt_sub = false, // true while tooltip below mousepointer
85 tt_mf = null, // stores previous mousemove evthandler
86 // Opera: disable href when hovering <a>
87 tt_tag = null; // stores hovered dom node, href and previous statusbar txt
90 var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null,
91 tt_n = navigator.userAgent.toLowerCase(),
92 tt_nv = navigator.appVersion;
94 var tt_op = !!(window.opera && document.getElementById),
95 tt_op6 = tt_op && !document.defaultView,
96 tt_op7 = tt_op && !tt_op6,
97 tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op,
98 tt_ie6 = tt_ie && parseFloat(tt_nv.substring(tt_nv.indexOf("MSIE")+5)) >= 5.5,
99 tt_n4 = (document.layers && typeof document.classes != tt_u),
100 tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u),
101 tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;
106 return isNaN(t_y = parseInt(t_x))? 0 : t_y;
108 function wzReplace(t_x, t_y)
113 while((t_xI = t_str.indexOf(t_x)) != -1)
115 t_ret += t_str.substring(0, t_xI) + t_y;
116 t_str = t_str.substring(t_xI + t_x.length);
120 String.prototype.wzReplace = wzReplace;
121 function tt_N4Tags(tagtyp, t_d, t_y)
123 t_d = t_d || document;
124 t_y = t_y || new Array();
125 var t_x = (tagtyp=="a")? t_d.links : t_d.layers;
126 for(var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
127 for(z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
130 function tt_Htm(tt, t_id, txt)
132 var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
133 t_bgimg = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
134 t_bc = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
135 t_bw = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
136 t_ff = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
137 t_fc = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
138 t_fsz = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
139 t_fwght = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
140 t_opa = (typeof tt.T_OPACITY != tt_u)? tt.T_OPACITY : ttOpacity,
141 t_padd = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
142 t_shc = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
143 t_shw = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
144 t_algn = (typeof tt.T_TEXTALIGN != tt_u)? tt.T_TEXTALIGN : ttTextAlign,
145 t_tit = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : "",
146 t_titc = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
147 t_w = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH : ttWidth;
150 t_shc = t_shc || "#cccccc";
153 if(tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px";
155 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))) + ';';
156 var t_y = '<div id="'+t_id+'" style="position:absolute;z-index:1010;';
157 t_y += 'left:0px;top:0px;width:'+(t_w+t_shw)+'px;visibility:'+(tt_n4? 'hide' : 'hidden')+';'+t_optx+'">' +
158 '<table border="0" cellpadding="0" cellspacing="0"'+(t_bc? (' bgcolor="'+t_bc+'" style="background:'+t_bc+';"') : '')+' width="'+t_w+'">';
161 t_y += '<tr><td style="padding-left:3px;padding-right:3px;" align="'+t_algn+'"><font color="'+t_titc+'" face="'+t_ff+'" ' +
162 'style="color:'+t_titc+';font-family:'+t_ff+';font-size:'+t_fsz+';"><b>' +
163 (tt_n4? ' ' : '')+t_tit+'</b></font></td></tr>';
165 t_y += '<tr><td><table border="0" cellpadding="'+t_padd+'" cellspacing="'+t_bw+'" width="100%">' +
166 '<tr><td'+(t_bgc? (' bgcolor="'+t_bgc+'"') : '')+(t_bgimg? ' background="'+t_bgimg+'"' : '')+' style="text-align:'+t_algn+';';
167 if(tt_n6) t_y += 'padding:'+t_padd+'px;';
168 t_y += '" align="'+t_algn+'"><font color="'+t_fc+'" face="'+t_ff+'"' +
169 ' style="color:'+t_fc+';font-family:'+t_ff+';font-size:'+t_fsz+';font-weight:'+t_fwght+';">';
170 if(t_fwght == 'bold') t_y += '<b>';
172 if(t_fwght == 'bold') t_y += '</b>';
173 t_y += '</font></td></tr></table></td></tr></table>';
176 var t_spct = Math.round(t_shw*1.3);
179 t_y += '<layer bgcolor="'+t_shc+'" left="'+t_w+'" top="'+t_spct+'" width="'+t_shw+'" height="0"></layer>' +
180 '<layer bgcolor="'+t_shc+'" left="'+t_spct+'" align="bottom" width="'+(t_w-t_spct)+'" height="'+t_shw+'"></layer>';
184 t_optx = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : 'opacity:0.85;';
185 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>' +
186 '<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>';
189 return(t_y+'</div>' +
190 (tt_ie6 ? '<iframe id="TTiEiFrM" src="javascript:false" scrolling="no" frameborder="0" style="filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;display:none;"></iframe>' : ''));
194 var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
195 tt_Int(tt_ie? tt_db.scrollLeft : 0) +
197 if(t_y > xlim) t_y = xlim;
198 var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
199 if(t_y < t_scr) t_y = t_scr;
204 var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
205 tt_Int(tt_ie? tt_db.scrollTop : 0);
206 if(tt_sup) t_y -= (tt_objH + tt_offY - 15);
207 else if(t_y > ylim || !tt_sub && t_y > ylim-24)
209 t_y -= (tt_objH + 5);
219 function tt_ReleasMov()
221 if(document.onmousemove == tt_Move)
223 if(!tt_mf && document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
224 document.onmousemove = tt_mf;
227 function tt_ShowIfrm(t_x)
229 if(!tt_obj || !tt_ifrm) return;
232 tt_ifrm.style.width = tt_objW+'px';
233 tt_ifrm.style.height = tt_objH+'px';
234 tt_ifrm.style.display = "block";
236 else tt_ifrm.style.display = "none";
238 function tt_GetDiv(t_id)
241 tt_n4? (document.layers[t_id] || null)
242 : tt_ie? (document.all[t_id] || null)
243 : (document.getElementById(t_id) || null)
246 function tt_GetDivW()
249 tt_n4? tt_obj.clip.width
250 : (tt_obj.style.pixelWidth || tt_obj.offsetWidth)
253 function tt_GetDivH()
256 tt_n4? tt_obj.clip.height
257 : (tt_obj.style.pixelHeight || tt_obj.offsetHeight)
261 // Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
262 function tt_SetDivZ()
264 var t_i = tt_obj.style || tt_obj;
267 if(window.dd && dd.z)
268 t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
269 if(tt_ifrm) tt_ifrm.style.zIndex = t_i.zIndex-1;
272 function tt_SetDivPos(t_x, t_y)
274 var t_i = tt_obj.style || tt_obj;
275 var t_px = (tt_op6 || tt_n4)? '' : 'px';
276 t_i.left = (tt_objX = t_x) + t_px;
277 t_i.top = (tt_objY = t_y) + t_px;
280 tt_ifrm.style.left = t_i.left;
281 tt_ifrm.style.top = t_i.top;
284 function tt_ShowDiv(t_x)
287 if(tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
288 else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
291 function tt_OpDeHref(t_e)
299 if(t_tag.hasAttribute("href"))
302 tt_tag.t_href = tt_tag.getAttribute("href");
303 tt_tag.removeAttribute("href");
304 tt_tag.style.cursor = "hand";
305 tt_tag.onmousedown = tt_OpReHref;
306 tt_tag.stats = window.status;
307 window.status = tt_tag.t_href;
310 t_tag = t_tag.parentElement;
314 function tt_OpReHref()
318 tt_tag.setAttribute("href", tt_tag.t_href);
319 window.status = tt_tag.stats;
323 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)
325 if(tt_obj) tt_Hide();
326 tt_mf = document.onmousemove || null;
327 if(window.dd && (window.DRAG && tt_mf == DRAG || window.RESIZE && tt_mf == RESIZE)) return;
330 tt_obj = tt_GetDiv(t_id);
333 t_e = t_e || window.event;
334 tt_sub = !(tt_sup = t_sup);
335 tt_sticky = t_sticky;
336 tt_objW = tt_GetDivW();
337 tt_objH = tt_GetDivH();
338 tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
340 if(tt_op7) tt_OpDeHref(t_e);
343 if(tt_obj.document.layers.length)
345 t_sh = tt_obj.document.layers[0];
346 t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
351 t_sh = tt_GetDiv(t_id+'R');
354 t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
355 if(typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
356 else t_sh.style.height = t_h+'px';
360 xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
361 tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
364 ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
365 tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
369 if(t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
370 else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
372 var t_txt = 'tt_ShowDiv(\'true\');';
373 if(t_sticky) t_txt += '{'+
375 'window.tt_upFunc = document.onmouseup || null;'+
376 'if(document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
377 'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
379 else if(t_static) t_txt += 'tt_ReleasMov();';
380 if(t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
381 window.tt_rdl = window.setTimeout(t_txt, t_delay);
385 if(document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
386 document.onmousemove = tt_Move;
391 function tt_Move(t_ev)
398 setTimeout('tt_wait = false;', 5);
400 var t_e = t_ev || window.event;
401 tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
404 if(tt_area && t_e.target.tagName != 'AREA') tt_Hide();
405 else if(t_e.target.tagName == 'AREA') tt_area = true;
412 if(window.tt_rdl) window.clearTimeout(tt_rdl);
413 if(!tt_sticky || !tt_act)
415 if(window.tt_rtm) window.clearTimeout(tt_rtm);
417 tt_SetDivPos(-tt_objW, -tt_objH);
419 if(typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
422 if(tt_op6 && tt_area) tt_area = false;
424 if(tt_op7) tt_OpReHref();
429 if(!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;
431 var htm = tt_n4? '<div style="position:absolute;"></div>' : '',
435 esc = 'return escape(';
436 var i = tt_tags.length; while(i--)
438 tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
439 : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
440 : (!tt_n4 && tt_tags[i]=="a")? document.links
442 if(tt_n4 && (tt_tags[i] == "a" || tt_tags[i] == "layer")) tags = tt_N4Tags(tt_tags[i]);
443 var j = tags.length; while(j--)
445 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)
447 if(over) t_tj.onmouseover = new Function(over);
448 var txt = unescape(t_tj.onmouseover());
452 txt.wzReplace("& ","&")
455 t_tj.onmouseover = new Function('e',
457 '"tOoLtIp' +i+''+j+ '",'+
458 ((typeof t_tj.T_ABOVE != tt_u)? t_tj.T_ABOVE : ttAbove)+','+
459 ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay)+','+
460 ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""')+','+
461 ((typeof t_tj.T_LEFT != tt_u)? t_tj.T_LEFT : ttLeft)+','+
462 ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX)+','+
463 ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY)+','+
464 ((typeof t_tj.T_STATIC != tt_u)? t_tj.T_STATIC : ttStatic)+','+
465 ((typeof t_tj.T_STICKY != tt_u)? t_tj.T_STICKY : ttSticky)+','+
466 ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
469 t_tj.onmouseout = tt_Hide;
470 if(t_tj.alt) t_tj.alt = "";
471 if(t_tj.title) t_tj.title = "";
476 if(document.getElementById) tt_ifrm = document.getElementById("TTiEiFrM");