/* This notice must be untouched at all times.
Copyright (c) 2002-2008 Walter Zorn. All rights reserved.
wz_tooltip.js v. 5.0
The latest version is available at http://www.walterzorn.com or http://www.devira.com or http://www.walterzorn.de
Created 1.12.2002 by Walter Zorn (Web: http://www.walterzorn.com ) Last modified: 4.3.2008
Easy-to-use cross-browser tooltips. Just include the script at the beginning of the section, and invoke Tip('Tooltip text') from the desired HTML onmouseover eventhandlers, and UnTip(), usually from the onmouseout eventhandlers, to hide the tip. No container DIV required. By default, width and height of tooltips are 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 = false // 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, HTML elements to be converted to tooltips via TagToTip() are automatically hidden;
// if false, you should hide those HTML elements yourself
config. Above = true // false or true - tooltip above mousepointer
config. BgColor = '#E2E7FF' // Background colour (HTML colour value, in quotes)
config. BgImg = '' // Path to background image, none if empty string ''
config. BorderColor = '#003099'
config. BorderStyle = 'solid' // Any permitted CSS value, but I recommend 'solid', 'dotted' or 'dashed'
config. BorderWidth = 1
config. CenterMouse = true // 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. ClickSticky = false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is active
config. CloseBtn = true // false or true - closebutton in titlebar
config. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title colours
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, < 0 for delay in ms _after_ the onmouseout until the tooltip disappears
config. FadeIn = 0 // 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. Height = 0 // Tooltip height; 0 for automatic adaption to tooltip content, < 0 (e.g. -100) for a maximum for automatic adaption
config. JumpHorz = false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundary
config. JumpVert = true // false or true - jump vertically "
config. Left = true // false or true - tooltip on the left of the mouse
config. OffsetX = 8 // Horizontal offset of left-top corner from mousepointer
config. OffsetY = 4 // Vertical offset
config. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percent
config. Padding = 9 // Spacing between border and content
config. Shadow = false // false or true
config. ShadowColor = '#C0C0C0'
config. ShadowWidth = 5
config. Sticky = true // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseout
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; < -1 (e.g. -240) for a maximum width for that automatic adaption;
// -1: tooltip width confined to the width required for the titlebar
//======= END OF TOOLTIP CONFIG, DO NOT CHANGE ANYTHING BELOW ==============//
//===================== PUBLIC =============================================//
function Tip()
{
tt_Tip(arguments, null);
}
function TagToTip()
{
var t2t = tt_GetElt(arguments[0]);
if(t2t)
tt_Tip(arguments, t2t);
}
function UnTip()
{
tt_OpReHref();
if(tt_aV[DURATION] < 0)
tt_tDurt.Timer("tt_HideInit()", -tt_aV[DURATION], true);
else if(!(tt_aV[STICKY] && (tt_iState & 0x2)))
tt_HideInit();
}
//================== PUBLIC PLUGIN API =====================================//
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_HideInit()
{
if(tt_iState)
{
tt_ExtCallFncs(0, "HideInit");
tt_iState &= ~0x4;
if(tt_flagOpa && tt_aV[FADEOUT])
{
tt_tFade.EndTimer();
if(tt_opa)
{
var n = Math.round(tt_aV[FADEOUT] / (tt_aV[FADEINTERVAL] * (tt_aV[OPACITY] / tt_opa)));
tt_Fade(tt_opa, tt_opa, 0, n);
return;
}
}
tt_tHide.Timer("tt_Hide();", 1, false);
}
}
function tt_Hide()
{
if(tt_db && tt_iState)
{
tt_OpReHref();
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_aV[CLICKSTICKY])
tt_RemEvtFnc(document, "mouseup", tt_OnLClick);
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_ovr_, // HTML element the mouse is currently over
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, tt_bJmpHorz,// Tip temporarily on other side of mouse
tt_t2t, tt_t2tDad, // Tag converted to tip, and its parent element in the document
tt_elDeHref, // The tag from which we've 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(window, "scroll", tt_OnScrl);
// IE doesn't fire onscroll event when switching to fullscreen;
// fix suggested by Yoav Karpeles 14.2.2008
tt_AddEvtFnc(window, "resize", tt_OnScrl);
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();
// Ensure the tip be hidden when the page unloads
tt_AddEvtFnc(window, "unload", 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.", false);
}
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());
if(window.tt_GetMainDivRefs /* FireFox Alzheimer */ && 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";
tt_h = 0;
}
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("There are HTML elements to be converted to tooltips.\nIf you"
+ " want these HTML elements to be automatically hidden, you"
+ " must edit wz_tooltip.js, and set TagsToTip in the global"
+ " tooltip configuration to true.", true);
}
function tt_HideSrcTagsRecurs(dad)
{
var ovr, asT2t;
var 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") || a[i].getAttribute("onclick"))
: (typeof a[i].onmouseover == "function") ? (a[i].onmouseover || a[i].onclick)
: 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;
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.", true);
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_bJmpHorz = false;
tt_maxPosX = tt_GetClientW() + tt_scrlX - tt_w - 1;
tt_maxPosY = tt_GetClientH() + tt_scrlY - tt_h - 1;
tt_AdaptConfig2();
// Ensure the tip be shown and positioned before the first onmousemove
tt_OverInit();
tt_ShowInit();
tt_Move();
}
function tt_ReadCmds(a)
{
var i;
i = 0;
for(var j in config)
tt_aV[i++] = config[j];
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.", true);
return false;
}
function tt_AdaptConfig1()
{
tt_ExtCallFncs(0, "LoadConfig");
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])
{
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];
}
if(!tt_aV[TITLE].length)
tt_aV[TITLE] = " ";
}
if(tt_aV[OPACITY] == 100 && typeof tt_aElt[0].style.MozOpacity != tt_u && !Array.every)
tt_aV[OPACITY] = 99;
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);
tt_aV[JUMPHORZ] = false;
}
}
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 + '">