📄 wz_tooltip.js
字号:
/* This notice must be untouched at all times.Copyright (c) 2002-2008 Walter Zorn. All rights reserved.wz_tooltip.js v. 5.31The latest version is available athttp://www.walterzorn.comor http://www.devira.comor http://www.walterzorn.deCreated 1.12.2002 by Walter Zorn (Web: http://www.walterzorn.com )Last modified: 7.11.2008Easy-to-use cross-browser tooltips.Just include the script at the beginning of the <body> section, and invokeTip('Tooltip text') to show and UnTip() to hide the tooltip, from the desiredHTML eventhandlers. Example:<a onmouseover="Tip('Some text')" onmouseout="UnTip()" href="index.htm">My home page</a>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 tooltipsby 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 & behaviour of tooltips can be individually configuredvia commands passed to Tip() or TagToTip().Tab Width: 4LICENSE: LGPLThis library is free software; you can redistribute it and/ormodify it under the terms of the GNU Lesser General PublicLicense (LGPL) as published by the Free Software Foundation; eitherversion 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 ofMERCHANTABILITY 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 TOOLTIP CONFIGURATION =========================//var tt_Debug = true // false or true - recommended: false once you release your page to the publicvar tt_Enabled = true // Allows to (temporarily) suppress tooltips, e.g. by providing the user with a button that sets this global variable to falsevar 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// 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 mousepointerconfig. 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 = 1config. CenterMouse = false // false or true - center the tip horizontally below (or above) the mousepointerconfig. ClickClose = false // false or true - close tooltip if the user clicks somewhereconfig. ClickSticky = false // false or true - make tooltip sticky if user left-clicks on the hovered element while the tooltip is activeconfig. CloseBtn = false // false or true - closebutton in titlebarconfig. CloseBtnColors = ['#990000', '#FFFFFF', '#DD3333', '#FFFFFF'] // [Background, text, hovered background, hovered text] - use empty strings '' to inherit title coloursconfig. 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 ownconfig. Delay = 400 // Time span in ms until tooltip shows upconfig. 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 disappearsconfig. Exclusive = false // false or true - no other tooltip can appear until the current one has actively been closedconfig. FadeIn = 100 // Fade-in duration in ms, e.g. 400; 0 for no animationconfig. FadeOut = 100config. FadeInterval = 30 // Duration of each fade step in ms (recommended: 30) - shorter is smoother but causes more CPU-loadconfig. Fix = null // Fixated position, two modes. Mode 1: x- an y-coordinates in brackets, e.g. [210, 480]. Mode 2: Show tooltip at a position related to an HTML element: [ID of HTML element, x-offset, y-offset from HTML element], e.g. ['SomeID', 10, 30]. Value null (default) for no fixated positioning.config. FollowMouse = true // false or true - tooltip follows the mouseconfig. FontColor = '#000044'config. FontFace = 'Verdana,Geneva,sans-serif'config. FontSize = '8pt' // E.g. '9pt' or '12px' - unit is mandatoryconfig. 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 adaptionconfig. JumpHorz = false // false or true - jump horizontally to other side of mouse if tooltip would extend past clientarea boundaryconfig. JumpVert = true // false or true - jump vertically "config. Left = false // false or true - tooltip on the left of the mouseconfig. OffsetX = 14 // Horizontal offset of left-top corner from mousepointerconfig. OffsetY = 8 // Vertical offsetconfig. Opacity = 100 // Integer between 0 and 100 - opacity of tooltip in percentconfig. Padding = 3 // Spacing between border and contentconfig. Shadow = false // false or trueconfig. ShadowColor = '#C0C0C0'config. ShadowWidth = 5config. Sticky = false // false or true - fixate tip, ie. don't follow the mouse and don't hide on mouseoutconfig. 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 barconfig. TitleBgColor = '' // If empty string '', BorderColor will be usedconfig. TitleFontColor = '#FFFFFF' // Color of title text - if '', BgColor (of tooltip body) will be usedconfig. TitleFontFace = '' // If '' use FontFace (boldified)config. TitleFontSize = '' // If '' use FontSizeconfig. TitlePadding = 2config. 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_iState & 0x2)) tt_tDurt.Timer("tt_HideInit()", -tt_aV[DURATION], true); else if(!(tt_aV[STICKY] && (tt_iState & 0x2))) tt_HideInit();}//================== PUBLIC PLUGIN API =====================================//// Extension eventhandlers currently supported:// OnLoadConfig, OnCreateContentString, OnSubDivsCreated, OnShow, OnMoveBefore,// OnMoveAfter, OnHideInit, OnHide, OnKillvar 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 IEtt_aV = new Array(), // Caches and enumerates config data for currently active tooltiptt_sContent, // Inner tooltip text or HTMLtt_t2t, tt_t2tDad, // Tag converted to tip, and its DOM parent elementtt_musX, tt_musY,tt_over,tt_x, tt_y, tt_w, tt_h; // Position, width and height of currently displayed tooltipfunction 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 | 0x8); 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 tip, hide converted DOM node and // re-insert it into DOM if(tt_t2t && !tt_aV[COPYCONTENT]) tt_UnEl2Tip(); 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 tt_GetWndCliSiz("Width");}function tt_GetClientH(){ return tt_GetWndCliSiz("Height");}function tt_GetEvtX(e){ return (e ? ((typeof(e.pageX) != tt_u) ? e.pageX : (e.clientX + tt_GetScrollX())) : 0);}function tt_GetEvtY(e){ return (e ? ((typeof(e.pageY) != tt_u) ? e.pageY : (e.clientY + tt_GetScrollY())) : 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); }}function tt_GetDad(el){ return(el.parentNode || el.parentElement || el.offsetParent);}function tt_MovDomNode(el, dadFrom, dadTo){ if(dadFrom) dadFrom.removeChild(el); if(dadTo) dadTo.appendChild(el);}//====================== PRIVATE ===========================================//var tt_aExt = new Array(), // Array of extension objectstt_db, tt_op, tt_ie, tt_ie56, tt_bBoxOld, // Browser flagstt_body,tt_ovr_, // HTML element the mouse is currently overtt_flagOpa, // Opacity support: 1=IE, 2=Khtml, 3=KHTML, 4=Moz, 5=W3Ctt_maxPosX, tt_maxPosY,tt_iState = 0, // Tooltip active |= 1, shown |= 2, move with mouse |= 4, exclusive |= 8tt_opa, // Currently applied opacitytt_bJmpVert, tt_bJmpHorz,// Tip temporarily on other side of mousett_elDeHref, // The tag from which we've removed the href attribute// Timertt_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(); // 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 casefunction 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 <body> 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( '<div id="WzTtDiV"></div>' + (tt_ie56 ? ('<iframe id="WzTtIfRm" src="javascript:false" scrolling="no" frameborder="0" style="filter:Alpha(opacity=0);position:absolute;top:0px;left:0px;display:none;"></iframe>') : '') );}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(){ tt_SetTipPos(0, 0); tt_aElt[0].innerHTML = ""; tt_aElt[0].style.width = "0px"; tt_h = 0;}function tt_IsW3cBox(){ var css = tt_aElt[0].style; css.padding = "10px"; css.width = "40px";⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -