1 /* This notice must be untouched at all times.
\r
3 wz_tooltip.js v. 3.27
\r
5 The latest version is available at
\r
6 http://www.walterzorn.com
\r
7 or http://www.devira.com
\r
8 or http://www.walterzorn.de
\r
10 Copyright (c) 2002-2004 Walter Zorn. All rights reserved.
\r
11 Created 1. 12. 2002 by Walter Zorn (Web: http://www.walterzorn.com )
\r
12 Last modified: 14. 2. 2005
\r
14 Cross-browser tooltips working even in Opera 5 and 6,
\r
15 as well as in NN 4, Gecko-Browsers, IE4+, Opera 7 and Konqueror.
\r
16 No onmouseouts required.
\r
17 Appearance of tooltips can be individually configured
\r
18 via commands within the onmouseovers.
\r
22 This library is free software; you can redistribute it and/or
\r
23 modify it under the terms of the GNU Lesser General Public
\r
24 License (LGPL) as published by the Free Software Foundation; either
\r
25 version 2.1 of the License, or (at your option) any later version.
\r
27 This library is distributed in the hope that it will be useful,
\r
28 but WITHOUT ANY WARRANTY; without even the implied warranty of
\r
29 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
\r
31 For more details on the GNU Lesser General Public License,
\r
32 see http://www.gnu.org/copyleft/lesser.html
\r
37 //////////////// GLOBAL TOOPTIP CONFIGURATION /////////////////////
\r
38 var ttBgColor = "#000000";
\r
39 var ttBgImg = "tt.gif"; // path to background image;
\r
40 var ttBorderColor = "#3F3325";
\r
41 var ttBorderWidth = 5;
\r
42 var ttDelay = 100; // time span until tooltip shows up [milliseconds]
\r
43 var ttFontColor = "#FFCC00";
\r
44 var ttFontFace = "arial,helvetica,sans-serif";
\r
45 var ttFontSize = "10px";
\r
46 var ttFontWeight = "normal"; // alternative is "bold";
\r
47 var ttOffsetX = 16; // horizontal offset of left-top corner from mousepointer
\r
48 var ttOffsetY = 16; // vertical offset "
\r
49 var ttPadding = 3; // spacing between border and content
\r
50 var ttShadowColor = "";
\r
51 var ttShadowWidth = 0;
\r
52 var ttTemp = 0; // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
\r
53 var ttTextAlign = "left";
\r
54 var ttTitleColor = "#FFCC00"; // color of caption text
\r
56 //////////////////// END OF TOOLTIP CONFIG ////////////////////////
\r
60 ////////////// TAGS WITH TOOLTIP FUNCTIONALITY ////////////////////
\r
61 // List may be extended or shortened:
\r
62 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");
\r
63 /////////////////////////////////////////////////////////////////////
\r
67 ///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
\r
68 var tt_obj, // current tooltip
\r
69 tt_objW = 0, tt_objH = 0, // width and height of tt_obj
\r
70 tt_objX = 0, tt_objY = 0,
\r
71 tt_offX = 0, tt_offY = 0,
\r
72 xlim = 0, ylim = 0, // right and bottom borders of visible client area
\r
73 tt_sup = false, // true if T_ABOVE cmd
\r
74 tt_sticky = false, // tt_obj sticky?
\r
76 tt_vis = false, // tooltip visibility flag
\r
77 tt_sub = false, // true while tooltip below mousepointer
\r
79 tt_inputs = new Array(), // drop-down-boxes to be hidden in IE
\r
80 // Opera: disable href when hovering <a>
\r
81 tt_tag = null; // stores hovered dom node, href and previous statusbar txt
\r
84 var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null,
\r
85 tt_n = navigator.userAgent.toLowerCase();
\r
88 var tt_op = !!(window.opera && document.getElementById),
\r
89 tt_op6 = tt_op && !document.defaultView,
\r
90 tt_op7 = tt_op && !tt_op6,
\r
91 tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op,
\r
92 tt_n4 = (document.layers && typeof document.classes != tt_u),
\r
93 tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u),
\r
94 tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;
\r
99 function tt_Int(t_x)
\r
102 return isNaN(t_y = parseInt(t_x))? 0 : t_y;
\r
105 function wzReplace(t_x, t_y)
\r
110 while((t_xI = t_str.indexOf(t_x)) != -1)
\r
112 t_ret += t_str.substring(0, t_xI) + t_y;
\r
113 t_str = t_str.substring(t_xI + t_x.length);
\r
115 return t_ret+t_str;
\r
117 String.prototype.wzReplace = wzReplace;
\r
119 function tt_N4Tags(tagtyp, t_d, t_y)
\r
121 t_d = t_d || document;
\r
122 t_y = t_y || new Array();
\r
123 var t_x = (tagtyp=="a")? t_d.links : t_d.layers;
\r
124 for(var z = t_x.length; z--;) t_y[t_y.length] = t_x[z];
\r
125 for(var z = t_d.layers.length; z--;) t_y = tt_N4Tags(tagtyp, t_d.layers[z].document, t_y);
\r
129 function tt_GetSelects()
\r
131 if (!tt_op6 && !tt_ie) return;
\r
132 var t_s = tt_op6? "input" : "select";
\r
135 var t_i = document.all.tags(t_s).length; while(t_i--)
\r
136 tt_inputs[t_i] = document.all.tags(t_s)[t_i];
\r
138 else if (document.getElementsByTagName)
\r
140 var t_i = document.getElementsByTagName(t_s).length; while(t_i--)
\r
141 tt_inputs[t_i] = document.getElementsByTagName(t_s)[t_i];
\r
143 var t_i = tt_inputs.length; while(t_i--)
\r
145 tt_inputs[t_i].x = 0;
\r
146 tt_inputs[t_i].y = 0;
\r
147 var t_o = tt_inputs[t_i];
\r
150 tt_inputs[t_i].x += t_o.offsetLeft || 0;
\r
151 tt_inputs[t_i].y += t_o.offsetTop|| 0;
\r
152 t_o = t_o.offsetParent;
\r
157 function tt_Htm(tt, t_id, txt)
\r
159 var t_bgc = (typeof tt.T_BGCOLOR != tt_u)? tt.T_BGCOLOR : ttBgColor,
\r
160 t_bgimg = (typeof tt.T_BGIMG != tt_u)? tt.T_BGIMG : ttBgImg,
\r
161 t_bc = (typeof tt.T_BORDERCOLOR != tt_u)? tt.T_BORDERCOLOR : ttBorderColor,
\r
162 t_bw = (typeof tt.T_BORDERWIDTH != tt_u)? tt.T_BORDERWIDTH : ttBorderWidth,
\r
163 t_ff = (typeof tt.T_FONTFACE != tt_u)? tt.T_FONTFACE : ttFontFace,
\r
164 t_fc = (typeof tt.T_FONTCOLOR != tt_u)? tt.T_FONTCOLOR : ttFontColor,
\r
165 t_fsz = (typeof tt.T_FONTSIZE != tt_u)? tt.T_FONTSIZE : ttFontSize,
\r
166 t_fwght = (typeof tt.T_FONTWEIGHT != tt_u)? tt.T_FONTWEIGHT : ttFontWeight,
\r
167 t_padd = (typeof tt.T_PADDING != tt_u)? tt.T_PADDING : ttPadding,
\r
168 t_shc = (typeof tt.T_SHADOWCOLOR != tt_u)? tt.T_SHADOWCOLOR : (ttShadowColor || 0),
\r
169 t_shw = (typeof tt.T_SHADOWWIDTH != tt_u)? tt.T_SHADOWWIDTH : (ttShadowWidth || 0),
\r
170 t_algn = (typeof tt.T_TEXTALIGN != tt_u)? tt.T_TEXTALIGN : ttTextAlign,
\r
171 t_tit = (typeof tt.T_TITLE != tt_u)? tt.T_TITLE : "",
\r
172 t_titc = (typeof tt.T_TITLECOLOR != tt_u)? tt.T_TITLECOLOR : ttTitleColor,
\r
173 t_w = (typeof tt.T_WIDTH != tt_u)? tt.T_WIDTH : ttWidth;
\r
174 if (t_shc || t_shw)
\r
176 t_shc = t_shc || "#cccccc";
\r
177 t_shw = t_shw || 5;
\r
179 if (tt_n4 && (t_fsz == "10px" || t_fsz == "11px")) t_fsz = "12px";
\r
182 var t_y = '<div id="'+t_id+'" style="position:absolute;z-index:1010;';
\r
183 t_y += 'left:0px;top:0px;width:'+(t_w+t_shw)+'px;visibility:'+(tt_n4? 'hide' : 'hidden')+';">' +
\r
184 '<table border="0" cellpadding="0" cellspacing="0"'+(t_bc? (' bgcolor="'+t_bc+'"') : '')+' width="'+t_w+'">';
\r
187 t_y += '<tr><td style="padding-left:3px;padding-right:3px;" align="'+t_algn+'"><font color="'+t_titc+'" face="'+t_ff+'" ' +
\r
188 'style="color:'+t_titc+';font-family:'+t_ff+';font-size:'+t_fsz+';"><b>' +
\r
189 (tt_n4? ' ' : '')+t_tit+'<\/b><\/font><\/td><\/tr>';
\r
191 t_y += '<tr><td><table border="0" cellpadding="'+t_padd+'" cellspacing="'+t_bw+'px" width="100%">' +
\r
192 '<tr><td'+(t_bgc? (' bgcolor="'+t_bgc+'"') : '')+(t_bgimg? ' background="'+t_bgimg+'"' : '');
\r
193 if (tt_n6) t_y += ' style="padding:'+t_padd+'px;"';
\r
194 t_y += ' align="'+t_algn+'"><font color="'+t_fc+'" face="'+t_ff+'"' +
\r
195 ' style="color:'+t_fc+';font-family:'+t_ff+';font-size:'+t_fsz+';font-weight:'+t_fwght+';">';
\r
196 if (t_fwght == 'bold') t_y += '<b>';
\r
198 if (t_fwght == 'bold') t_y += '<\/b>';
\r
199 t_y += '<\/font><\/td><\/tr><\/table><\/td><\/tr><\/table>';
\r
202 var t_spct = Math.round(t_shw*1.3);
\r
205 t_y += '<layer bgcolor="'+t_shc+'" left="'+t_w+'" top="'+t_spct+'" width="'+t_shw+'" height="0"><\/layer>' +
\r
206 '<layer bgcolor="'+t_shc+'" left="'+t_spct+'" align="bottom" width="'+(t_w-t_spct)+'" height="'+t_shw+'"><\/layer>';
\r
210 var t_opa = tt_n6? '-moz-opacity:0.85;' : tt_ie? 'filter:Alpha(opacity=85);' : '';
\r
211 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_opa+'"><\/div>' +
\r
212 '<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_opa+'"><\/div>';
\r
221 if (!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;
\r
223 var htm = tt_n4? '<div style="position:absolute;"><\/div>' : '',
\r
227 esc = 'return escape(';
\r
228 var i = tt_tags.length; while(i--)
\r
230 tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
\r
231 : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
\r
232 : (!tt_n4 && tt_tags[i]=="a")? document.links
\r
234 if (tt_n4 && (tt_tags[i] == "a" || tt_tags[i] == "layer")) tags = tt_N4Tags(tt_tags[i]);
\r
235 var j = tags.length; while(j--)
\r
237 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)
\r
239 if (over) t_tj.onmouseover = new Function(over);
\r
240 var txt = unescape(t_tj.onmouseover());
\r
244 txt.wzReplace("& ","&")
\r
247 t_tj.onmouseover = new Function('e',
\r
249 '"tOoLtIp' +i+''+j+ '",'+
\r
250 (typeof t_tj.T_ABOVE != tt_u)+','+
\r
251 ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay)+','+
\r
252 ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""')+','+
\r
253 (typeof t_tj.T_LEFT != tt_u)+','+
\r
254 ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX)+','+
\r
255 ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY)+','+
\r
256 (typeof t_tj.T_STATIC != tt_u)+','+
\r
257 (typeof t_tj.T_STICKY != tt_u)+','+
\r
258 ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
\r
261 t_tj.onmouseout = tt_Hide;
\r
262 if (t_tj.alt) t_tj.alt = "";
\r
263 if (t_tj.title) t_tj.title = "";
\r
267 document.write(htm);
\r
270 function tt_EvX(t_e)
\r
272 var t_y = tt_Int(t_e.pageX || t_e.clientX || 0) +
\r
273 tt_Int(tt_ie? tt_db.scrollLeft : 0) +
\r
275 if (t_y > xlim) t_y = xlim;
\r
276 var t_scr = tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0);
\r
277 if (t_y < t_scr) t_y = t_scr;
\r
281 function tt_EvY(t_e)
\r
283 var t_y = tt_Int(t_e.pageY || t_e.clientY || 0) +
\r
284 tt_Int(tt_ie? tt_db.scrollTop : 0);
\r
285 if (tt_sup) t_y -= (tt_objH + tt_offY - 15);
\r
286 else if (t_y > ylim || !tt_sub && t_y > ylim-24)
\r
288 t_y -= (tt_objH + 5);
\r
299 function tt_ReleasMov()
\r
301 if (document.onmousemove == tt_Move)
\r
303 if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE);
\r
304 document.onmousemove = null;
\r
308 function tt_HideInput()
\r
310 if (!(tt_ie || tt_op6) || !tt_inputs) return;
\r
312 var t_i = tt_inputs.length; while(t_i--)
\r
314 t_o = tt_inputs[t_i];
\r
315 if (tt_vis && tt_objX+tt_objW > t_o.x && tt_objX < t_o.x+t_o.offsetWidth && tt_objY+tt_objH > t_o.y && tt_objY < t_o.y+t_o.offsetHeight)
\r
316 t_o.style.visibility = 'hidden';
\r
317 else t_o.style.visibility = 'visible';
\r
321 function tt_GetDiv(t_id)
\r
324 tt_n4? (document.layers[t_id] || null)
\r
325 : tt_ie? (document.all[t_id] || null)
\r
326 : (document.getElementById(t_id) || null)
\r
330 function tt_GetDivW()
\r
333 tt_n4? tt_obj.clip.width
\r
334 : tt_obj.style.pixelWidth? tt_obj.style.pixelWidth
\r
335 : tt_obj.offsetWidth
\r
339 function tt_GetDivH()
\r
342 tt_n4? tt_obj.clip.height
\r
343 : tt_obj.style.pixelHeight? tt_obj.style.pixelHeight
\r
344 : tt_obj.offsetHeight
\r
348 // Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
\r
349 function tt_SetDivZ()
\r
351 var t_i = tt_obj.style || tt_obj;
\r
352 if (window.dd && dd.z)
\r
353 t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
\r
356 function tt_SetDivPos(t_x, t_y)
\r
358 var t_i = tt_obj.style || tt_obj;
\r
359 var t_px = (tt_op6 || tt_n4)? '' : 'px';
\r
360 t_i.left = (tt_objX = t_x) + t_px;
\r
361 t_i.top = (tt_objY = t_y) + t_px;
\r
365 function tt_ShowDiv(t_x)
\r
367 if (tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
\r
368 else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
\r
373 function tt_OpDeHref(t_e)
\r
375 if (t_e && t_e.target.hasAttribute("href"))
\r
377 tt_tag = t_e.target;
\r
378 tt_tag.t_href = tt_tag.getAttribute("href");
\r
379 tt_tag.removeAttribute("href");
\r
380 tt_tag.style.cursor = "hand";
\r
381 tt_tag.onmousedown = tt_OpReHref;
\r
382 tt_tag.stats = window.status;
\r
383 window.status = tt_tag.t_href;
\r
387 function tt_OpReHref()
\r
391 tt_tag.setAttribute("href", tt_tag.t_href);
\r
392 window.status = tt_tag.stats;
\r
397 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)
\r
399 if (tt_obj) tt_Hide();
\r
400 var t_mf = document.onmousemove || null;
\r
401 if (window.dd && (window.DRAG && t_mf == DRAG || window.RESIZE && t_mf == RESIZE)) return;
\r
402 var t_uf = document.onmouseup || null;
\r
403 if (t_mf && t_uf) t_uf(t_e);
\r
405 tt_obj = tt_GetDiv(t_id);
\r
408 t_e = t_e || window.event;
\r
409 tt_sub = !(tt_sup = t_sup);
\r
410 tt_sticky = t_sticky;
\r
411 tt_objW = tt_GetDivW();
\r
412 tt_objH = tt_GetDivH();
\r
413 tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
\r
415 if (tt_op7) tt_OpDeHref(t_e);
\r
418 if (tt_obj.document.layers.length)
\r
420 var t_sh = tt_obj.document.layers[0];
\r
421 t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
\r
426 var t_sh = tt_GetDiv(t_id+'R');
\r
429 var t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
\r
430 if (typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
\r
431 else t_sh.style.height = t_h+'px';
\r
437 xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
\r
438 tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
\r
441 ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
\r
442 tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
\r
446 if (t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
\r
447 else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
\r
449 var t_txt = 'tt_ShowDiv(\'true\');';
\r
450 if (t_sticky) t_txt += '{'+
\r
452 'window.tt_upFunc = document.onmouseup || null;'+
\r
453 'if (document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
\r
454 'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
\r
456 else if (t_static) t_txt += 'tt_ReleasMov();';
\r
457 if (t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
\r
458 window.tt_rdl = window.setTimeout(t_txt, t_delay);
\r
462 if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
\r
463 document.onmousemove = tt_Move;
\r
468 var tt_area = false;
\r
469 function tt_Move(t_ev)
\r
471 if (!tt_obj) return;
\r
472 if (tt_n6 || tt_w3c)
\r
474 if (tt_wait) return;
\r
476 setTimeout('tt_wait = false;', 5);
\r
478 var t_e = t_ev || window.event;
\r
479 tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
\r
482 if (tt_area && t_e.target.tagName != 'AREA') tt_Hide();
\r
483 else if (t_e.target.tagName == 'AREA') tt_area = true;
\r
491 if (window.tt_rdl) window.clearTimeout(tt_rdl);
\r
492 if (!tt_sticky || !tt_vis)
\r
494 if (window.tt_rtm) window.clearTimeout(tt_rtm);
\r
496 tt_SetDivPos(-tt_objW, -tt_objH);
\r
498 if (typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
\r
501 if (tt_op6 && tt_area) tt_area = false;
\r
503 if (tt_op7) tt_OpReHref();
\r