/* This notice must be untouched at all times. wz_tooltip.js v. 4.12 The latest version is available at http://www.walterzorn.com or http://www.devira.com or http://www.walterzorn.de Copyright (c) 2002-2007 Walter Zorn. All rights reserved. Created 1.12.2002 by Walter Zorn (Web: http://www.walterzorn.com ) Last modified: 13.7.2007 Easy-to-use cross-browser tooltips. Just include the script at the beginning of the
section, and invoke Tip('Tooltip text') from within the desired HTML onmouseover eventhandlers. No container DIV, no onmouseouts required. By default, width of tooltips is automatically adapted to content. Is even capable of dynamically converting arbitrary HTML elements to tooltips by calling TagToTip('ID_of_HTML_element_to_be_converted') instead of Tip(), which means you can put important, search-engine-relevant stuff into tooltips. Appearance of tooltips can be individually configured via commands passed to Tip() or TagToTip(). Tab Width: 4 LICENSE: LGPL This library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License (LGPL) as published by the Free Software Foundation; either version 2.1 of the License, or (at your option) any later version. This library is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For more details on the GNU Lesser General Public License, see http://www.gnu.org/copyleft/lesser.html */ var config = new Object(); //=================== GLOBAL TOOPTIP CONFIGURATION =========================// var tt_Debug = true // false or true - recommended: false once you release your page to the public var tt_Enabled = true // Allows to (temporarily) suppress tooltips, e.g. by providing the user with a button that sets this global variable to false var TagsToTip = true // false or true - if true, the script is capable of converting HTML elements to tooltips // For each of the following config variables there exists a command, which is // just the variablename in uppercase, to be passed to Tip() or TagToTip() to // configure tooltips individually. Individual commands override global // configuration. Order of commands is arbitrary. // Example: onmouseover="Tip('Tooltip text', LEFT, true, BGCOLOR, '#FF9900', FADEIN, 400)" config. Above = false // false or true - tooltip above mousepointer? config. BgColor = '#E4E7FF' // Background color config. BgImg = '' // Path to background image, none if empty string '' config. BorderColor = '#002299' config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed' config. BorderWidth = 1 config. CenterMouse = false // false or true - center the tip horizontally below (or above) the mousepointer config. ClickClose = false // false or true - close tooltip if the user clicks somewhere config. CloseBtn = false // false or true - closebutton in titlebar config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colors config. CloseBtnText = ' X ' // Close button text (may also be an image tag) config. CopyContent = true // When converting a HTML element to a tooltip, copy only the element's content, rather than converting the element by its own config. Delay = 400 // Time span in ms until tooltip shows up config. Duration = 0 // Time span in ms after which the tooltip disappears; 0 for infinite duration config. FadeIn = 400 // Fade-in duration in ms, e.g. 400; 0 for no animation config. FadeOut = 0 config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-load config. Fix = null // Fixated position - x- an y-oordinates in brackets, e.g. [210, 480], or null for no fixation config. FollowMouse = true // false or true - tooltip follows the mouse config. FontColor = '#000044' config. FontFace = 'Verdana,Geneva,sans-serif' config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatory config. FontWeight = 'normal' // 'normal' or 'bold'; config. Left = false // false or true - tooltip on the left of the mouse config. OffsetX = 14 // Horizontal offset of left-top corner from mousepointer config. OffsetY = 8 // Vertical offset config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent config. Padding = 3 // Spacing between border and content config. Shadow = true // false or true config. ShadowColor = '#C0C0C0' config. ShadowWidth = 5 config. Sticky = false // Do NOT hide tooltip on mouseout? false or true config. TextAlign = 'left' // 'left', 'right' or 'justify' config. Title = '' // Default title text applied to all tips (no default title: empty string '') config. TitleAlign = 'left' // 'left' or 'right' - text alignment inside the title bar config. TitleBgColor = '' // If empty string '', BorderColor will be used config. TitleFontColor = '#ffffff' // Color of title text - if '', BgColor (of tooltip body) will be used config. TitleFontFace = '' // If '' use FontFace (boldified) config. TitleFontSize = '' // If '' use FontSize config. Width = 0 // Tooltip width; 0 for automatic adaption to tooltip content //======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============// //====================== PUBLIC ============================================// function Tip() { tt_Tip(arguments, null); } function TagToTip() { if(TagsToTip) { var t2t = tt_GetElt(arguments[0]); if(t2t) tt_Tip(arguments, t2t); } } //================== PUBLIC EXTENSION API ==================================// // Extension eventhandlers currently supported: // OnLoadConfig, OnCreateContentString, OnSubDivsCreated, OnShow, OnMoveBefore, // OnMoveAfter, OnHideInit, OnHide, OnKill var tt_aElt = new Array(10), // Container DIV, outer title & body DIVs, inner title & body TDs, closebutton SPAN, shadow DIVs, and IFRAME to cover windowed elements in IE tt_aV = new Array(), // Caches and enumerates config data for currently active tooltip tt_sContent, // Inner tooltip text or HTML tt_scrlX = 0, tt_scrlY = 0, tt_musX, tt_musY, tt_over, tt_x, tt_y, tt_w, tt_h; // Position, width and height of currently displayed tooltip function tt_Extension() { tt_ExtCmdEnum(); tt_aExt[tt_aExt.length] = this; return this; } function tt_SetTipPos(x, y) { var css = tt_aElt[0].style; tt_x = x; tt_y = y; css.left = x + "px"; css.top = y + "px"; if(tt_ie56) { var ifrm = tt_aElt[tt_aElt.length - 1]; if(ifrm) { ifrm.style.left = css.left; ifrm.style.top = css.top; } } } function tt_Hide() { if(tt_db && tt_iState) { if(tt_iState & 0x2) { tt_aElt[0].style.visibility = "hidden"; tt_ExtCallFncs(0, "Hide"); } tt_tShow.EndTimer(); tt_tHide.EndTimer(); tt_tDurt.EndTimer(); tt_tFade.EndTimer(); if(!tt_op && !tt_ie) { tt_tWaitMov.EndTimer(); tt_bWait = false; } if(tt_aV[CLICKCLOSE]) tt_RemEvtFnc(document, "mouseup", tt_HideInit); tt_AddRemOutFnc(false); tt_ExtCallFncs(0, "Kill"); // In case of a TagToTip tooltip, hide converted DOM node and // re-insert it into document if(tt_t2t && !tt_aV[COPYCONTENT]) { tt_t2t.style.display = "none"; tt_MovDomNode(tt_t2t, tt_aElt[6], tt_t2tDad); } tt_iState = 0; tt_over = null; tt_ResetMainDiv(); if(tt_aElt[tt_aElt.length - 1]) tt_aElt[tt_aElt.length - 1].style.display = "none"; } } function tt_GetElt(id) { return(document.getElementById ? document.getElementById(id) : document.all ? document.all[id] : null); } function tt_GetDivW(el) { return(el ? (el.offsetWidth || el.style.pixelWidth || 0) : 0); } function tt_GetDivH(el) { return(el ? (el.offsetHeight || el.style.pixelHeight || 0) : 0); } function tt_GetScrollX() { return(window.pageXOffset || (tt_db ? (tt_db.scrollLeft || 0) : 0)); } function tt_GetScrollY() { return(window.pageYOffset || (tt_db ? (tt_db.scrollTop || 0) : 0)); } function tt_GetClientW() { return(document.body && (typeof(document.body.clientWidth) != tt_u) ? document.body.clientWidth : (typeof(window.innerWidth) != tt_u) ? window.innerWidth : tt_db ? (tt_db.clientWidth || 0) : 0); } function tt_GetClientH() { // Exactly this order seems to yield correct values in all major browsers return(document.body && (typeof(document.body.clientHeight) != tt_u) ? document.body.clientHeight : (typeof(window.innerHeight) != tt_u) ? window.innerHeight : tt_db ? (tt_db.clientHeight || 0) : 0); } function tt_GetEvtX(e) { return (e ? ((typeof(e.pageX) != tt_u) ? e.pageX : (e.clientX + tt_scrlX)) : 0); } function tt_GetEvtY(e) { return (e ? ((typeof(e.pageY) != tt_u) ? e.pageY : (e.clientY + tt_scrlY)) : 0); } function tt_AddEvtFnc(el, sEvt, PFnc) { if(el) { if(el.addEventListener) el.addEventListener(sEvt, PFnc, false); else el.attachEvent("on" + sEvt, PFnc); } } function tt_RemEvtFnc(el, sEvt, PFnc) { if(el) { if(el.removeEventListener) el.removeEventListener(sEvt, PFnc, false); else el.detachEvent("on" + sEvt, PFnc); } } //====================== PRIVATE ===========================================// var tt_aExt = new Array(), // Array of extension objects tt_db, tt_op, tt_ie, tt_ie56, tt_bBoxOld, // Browser flags tt_body, tt_flagOpa, // Opacity support: 1=IE, 2=Khtml, 3=KHTML, 4=Moz, 5=W3C tt_maxPosX, tt_maxPosY, tt_iState = 0, // Tooltip active |= 1, shown |= 2, move with mouse |= 4 tt_opa, // Currently applied opacity tt_bJmpVert, // Tip above mouse (or ABOVE tip below mouse) tt_t2t, tt_t2tDad, // Tag converted to tip, and its parent element in the document tt_elDeHref, // The tag from which Opera has removed the href attribute // Timer tt_tShow = new Number(0), tt_tHide = new Number(0), tt_tDurt = new Number(0), tt_tFade = new Number(0), tt_tWaitMov = new Number(0), tt_bWait = false, tt_u = "undefined"; function tt_Init() { tt_MkCmdEnum(); // Send old browsers instantly to hell if(!tt_Browser() || !tt_MkMainDiv()) return; tt_IsW3cBox(); tt_OpaSupport(); tt_AddEvtFnc(document, "mousemove", tt_Move); // In Debug mode we search for TagToTip() calls in order to notify // the user if they've forgotten to set the TagsToTip config flag if(TagsToTip || tt_Debug) tt_SetOnloadFnc(); tt_AddEvtFnc(window, "scroll", function() { tt_scrlX = tt_GetScrollX(); tt_scrlY = tt_GetScrollY(); if(tt_iState && !(tt_aV[STICKY] && (tt_iState & 2))) tt_HideInit(); } ); // Ensure the tip be hidden when the page unloads tt_AddEvtFnc(window, "unload", tt_Hide); tt_Hide(); } // Creates command names by translating config variable names to upper case function tt_MkCmdEnum() { var n = 0; for(var i in config) eval("window." + i.toString().toUpperCase() + " = " + n++); tt_aV.length = n; } function tt_Browser() { var n, nv, n6, w3c; n = navigator.userAgent.toLowerCase(), nv = navigator.appVersion; tt_op = (document.defaultView && typeof(eval("w" + "indow" + "." + "o" + "p" + "er" + "a")) != tt_u); tt_ie = n.indexOf("msie") != -1 && document.all && !tt_op; if(tt_ie) { var ieOld = (!document.compatMode || document.compatMode == "BackCompat"); tt_db = !ieOld ? document.documentElement : (document.body || null); if(tt_db) tt_ie56 = parseFloat(nv.substring(nv.indexOf("MSIE") + 5)) >= 5.5 && typeof document.body.style.maxHeight == tt_u; } else { tt_db = document.documentElement || document.body || (document.getElementsByTagName ? document.getElementsByTagName("body")[0] : null); if(!tt_op) { n6 = document.defaultView && typeof document.defaultView.getComputedStyle != tt_u; w3c = !n6 && document.getElementById; } } tt_body = (document.getElementsByTagName ? document.getElementsByTagName("body")[0] : (document.body || null)); if(tt_ie || n6 || tt_op || w3c) { if(tt_body && tt_db) { if(document.attachEvent || document.addEventListener) return true; } else tt_Err("wz_tooltip.js must be included INSIDE the body section," + " immediately after the opening tag."); } tt_db = null; return false; } function tt_MkMainDiv() { // Create the tooltip DIV if(tt_body.insertAdjacentHTML) tt_body.insertAdjacentHTML("afterBegin", tt_MkMainDivHtm()); else if(typeof tt_body.innerHTML != tt_u && document.createElement && tt_body.appendChild) tt_body.appendChild(tt_MkMainDivDom()); // FireFox Alzheimer bug if(window.tt_GetMainDivRefs && tt_GetMainDivRefs()) return true; tt_db = null; return false; } function tt_MkMainDivHtm() { return('' + (tt_ie56 ? ('') : '')); } function tt_MkMainDivDom() { var el = document.createElement("div"); if(el) el.id = "WzTtDiV"; return el; } function tt_GetMainDivRefs() { tt_aElt[0] = tt_GetElt("WzTtDiV"); if(tt_ie56 && tt_aElt[0]) { tt_aElt[tt_aElt.length - 1] = tt_GetElt("WzTtIfRm"); if(!tt_aElt[tt_aElt.length - 1]) tt_aElt[0] = null; } if(tt_aElt[0]) { var css = tt_aElt[0].style; css.visibility = "hidden"; css.position = "absolute"; css.overflow = "hidden"; return true; } return false; } function tt_ResetMainDiv() { var w = (window.screen && screen.width) ? screen.width : 10000; tt_SetTipPos(-w, 0); tt_aElt[0].innerHTML = ""; tt_aElt[0].style.width = (w - 1) + "px"; } function tt_IsW3cBox() { var css = tt_aElt[0].style; css.padding = "10px"; css.width = "40px"; tt_bBoxOld = (tt_GetDivW(tt_aElt[0]) == 40); css.padding = "0px"; tt_ResetMainDiv(); } function tt_OpaSupport() { var css = tt_body.style; tt_flagOpa = (typeof(css.filter) != tt_u) ? 1 : (typeof(css.KhtmlOpacity) != tt_u) ? 2 : (typeof(css.KHTMLOpacity) != tt_u) ? 3 : (typeof(css.MozOpacity) != tt_u) ? 4 : (typeof(css.opacity) != tt_u) ? 5 : 0; } // Ported from http://dean.edwards.name/weblog/2006/06/again/ // (Dean Edwards et al.) function tt_SetOnloadFnc() { tt_AddEvtFnc(document, "DOMContentLoaded", tt_HideSrcTags); tt_AddEvtFnc(window, "load", tt_HideSrcTags); if(tt_body.attachEvent) tt_body.attachEvent("onreadystatechange", function() { if(tt_body.readyState == "complete") tt_HideSrcTags(); } ); if(/WebKit|KHTML/i.test(navigator.userAgent)) { var t = setInterval(function() { if(/loaded|complete/.test(document.readyState)) { clearInterval(t); tt_HideSrcTags(); } }, 10); } } function tt_HideSrcTags() { if(!window.tt_HideSrcTags || window.tt_HideSrcTags.done) return; window.tt_HideSrcTags.done = true; if(!tt_HideSrcTagsRecurs(tt_body)) tt_Err("To enable the capability to convert HTML elements to tooltips," + " you must set TagsToTip in the global tooltip configuration" + " to true."); } function tt_HideSrcTagsRecurs(dad) { var a, ovr, asT2t; // Walk the DOM tree for tags that have an onmouseover attribute // containing a TagToTip('...') call. // (.childNodes first since .children is bugous in Safari) a = dad.childNodes || dad.children || null; for(var i = a ? a.length : 0; i;) {--i; if(!tt_HideSrcTagsRecurs(a[i])) return false; ovr = a[i].getAttribute ? a[i].getAttribute("onmouseover") : (typeof a[i].onmouseover == "function") ? a[i].onmouseover : null; if(ovr) { asT2t = ovr.toString().match(/TagToTip\s*\(\s*'[^'.]+'\s*[\),]/); if(asT2t && asT2t.length) { if(!tt_HideSrcTag(asT2t[0])) return false; } } } return true; } function tt_HideSrcTag(sT2t) { var id, el; // The ID passed to the found TagToTip() call identifies an HTML element // to be converted to a tooltip, so hide that element id = sT2t.replace(/.+'([^'.]+)'.+/, "$1"); el = tt_GetElt(id); if(el) { if(tt_Debug && !TagsToTip) return false; else el.style.display = "none"; } else tt_Err("Invalid ID\n'" + id + "'\npassed to TagToTip()." + " There exists no HTML element with that ID."); return true; } function tt_Tip(arg, t2t) { if(!tt_db) return; if(tt_iState) tt_Hide(); if(!tt_Enabled) return; tt_t2t = t2t; if(!tt_ReadCmds(arg)) return; tt_iState = 0x1 | 0x4; tt_AdaptConfig1(); tt_MkTipContent(arg); tt_MkTipSubDivs(); tt_FormatTip(); tt_bJmpVert = false; tt_maxPosX = tt_GetClientW() + tt_scrlX - tt_w - 1; tt_maxPosY = tt_GetClientH() + tt_scrlY - tt_h - 1; tt_AdaptConfig2(); // We must fake the first mousemove in order to ensure the tip // be immediately shown and positioned tt_Move(); tt_ShowInit(); } function tt_ReadCmds(a) { var i; // First load the global config values, to initialize also values // for which no command has been passed i = 0; for(var j in config) tt_aV[i++] = config[j]; // Then replace each cached config value for which a command has been // passed (ensure the # of command args plus value args be even) if(a.length & 1) { for(i = a.length - 1; i > 0; i -= 2) tt_aV[a[i - 1]] = a[i]; return true; } tt_Err("Incorrect call of Tip() or TagToTip().\n" + "Each command must be followed by a value."); return false; } function tt_AdaptConfig1() { tt_ExtCallFncs(0, "LoadConfig"); // Inherit unspecified title formattings from body if(!tt_aV[TITLEBGCOLOR].length) tt_aV[TITLEBGCOLOR] = tt_aV[BORDERCOLOR]; if(!tt_aV[TITLEFONTCOLOR].length) tt_aV[TITLEFONTCOLOR] = tt_aV[BGCOLOR]; if(!tt_aV[TITLEFONTFACE].length) tt_aV[TITLEFONTFACE] = tt_aV[FONTFACE]; if(!tt_aV[TITLEFONTSIZE].length) tt_aV[TITLEFONTSIZE] = tt_aV[FONTSIZE]; if(tt_aV[CLOSEBTN]) { // Use title colors for non-specified closebutton colors if(!tt_aV[CLOSEBTNCOLORS]) tt_aV[CLOSEBTNCOLORS] = new Array("", "", "", ""); for(var i = 4; i;) {--i; if(!tt_aV[CLOSEBTNCOLORS][i].length) tt_aV[CLOSEBTNCOLORS][i] = (i & 1) ? tt_aV[TITLEFONTCOLOR] : tt_aV[TITLEBGCOLOR]; } // Enforce titlebar be shown if(!tt_aV[TITLE].length) tt_aV[TITLE] = " "; } // Circumvents broken display of images and fade-in flicker in Geckos < 1.8 if(tt_aV[OPACITY] == 100 && typeof tt_aElt[0].style.MozOpacity != tt_u && !Array.every) tt_aV[OPACITY] = 99; // Smartly shorten the delay for fade-in tooltips if(tt_aV[FADEIN] && tt_flagOpa && tt_aV[DELAY] > 100) tt_aV[DELAY] = Math.max(tt_aV[DELAY] - tt_aV[FADEIN], 100); } function tt_AdaptConfig2() { if(tt_aV[CENTERMOUSE]) tt_aV[OFFSETX] -= ((tt_w - (tt_aV[SHADOW] ? tt_aV[SHADOWWIDTH] : 0)) >> 1); } // Expose content globally so extensions can modify it function tt_MkTipContent(a) { if(tt_t2t) { if(tt_aV[COPYCONTENT]) tt_sContent = tt_t2t.innerHTML; else tt_sContent = ""; } else tt_sContent = a[0]; tt_ExtCallFncs(0, "CreateContentString"); } function tt_MkTipSubDivs() { var sCss = 'position:relative;margin:0px;padding:0px;border-width:0px;left:0px;top:0px;line-height:normal;width:auto;', sTbTrTd = ' cellspacing=0 cellpadding=0 border=0 style="' + sCss + '">' + '' + tt_aV[CLOSEBTNTEXT] + ' | ') : '') + '