/* +-------------------------------------------------------------------+ | J S - T O O L T I P (v1.3) | | | | Copyright Gerd Tentler www.gerd-tentler.de/tools | | Created: Feb. 15, 2005 Last modified: Dec. 16, 2005 | +-------------------------------------------------------------------+ | This program may be used and hosted free of charge by anyone for | | personal purpose as long as this copyright notice remains intact. | | | | Obtain permission before selling the code for this program or | | hosting this software on a commercial website or redistributing | | this software over the Internet or in any other medium. In all | | cases copyright must remain intact. | +-------------------------------------------------------------------+ ====================================================================================================== This script was tested with the following systems and browsers: - Windows XP: IE 6, NN 4, NN 7, Opera 7, Firefox 1 - Mac OS X: IE 5, Safari 1 If you use another browser or system, this script may not work for you - sorry. ------------------------------------------------------------------------------------------------------ USAGE: Use the toolTip-function with mouse-over and mouse-out events (see example below). - To show a tooltip, use this syntax: toolTip(text, width in pixels, opacity in percent) Note: width and opacity are optional - To hide a tooltip, use this syntax: toolTip() ------------------------------------------------------------------------------------------------------ EXAMPLE: some text here ====================================================================================================== */ var OP = (navigator.userAgent.indexOf('Opera') != -1) ? true : false; var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP) ? true : false; var GK = (navigator.userAgent.indexOf('Gecko') != -1) ? true : false; var NN4 = document.layers; var DOM = document.getElementById; function TOOLTIP() { //---------------------------------------------------------------------------------------------------- // Configuration //---------------------------------------------------------------------------------------------------- this.width = 130; // width (pixels) this.bgColor = '#D5D8D6'; // background color this.textColor = '#000000'; // text color this.borderColor = '#0664d7'; // border color this.opacity = 100; // opacity (percent) - doesn't work with all browsers this.cursorDistance = 12; // distance from cursor (pixels) // don't change this.text = ''; this.height = 0; this.obj = 0; this.sobj = 0; this.active = false; // ------------------------------------------------------------------------------------------------------- // Functions // ------------------------------------------------------------------------------------------------------- this.create = function() { if(!this.sobj) this.init(); var t = '' + '
' + this.text + '
'; if(NN4) { t = '
' + t + '
'; this.sobj.document.write(t); this.sobj.document.close(); } else { this.sobj.border = '1px solid ' + this.borderColor; this.setOpacity(); if(document.getElementById) document.getElementById('ToolTip').innerHTML = t; else document.all.ToolTip.innerHTML = t; } if(DOM) this.height = this.obj.offsetHeight; else if(IE) this.height = this.sobj.pixelHeight; else if(NN4) this.height = this.obj.clip.bottom; this.show(); } this.init = function() { if(DOM) { this.obj = document.getElementById('ToolTip'); this.sobj = this.obj.style; } else if(IE) { this.obj = document.all.ToolTip; this.sobj = this.obj.style; } else if(NN4) { this.obj = document.ToolTip; this.sobj = this.obj; } } this.show = function() { var ext = (document.layers ? '' : 'px'); var left = mouseX; var top = mouseY; if(left + this.width + this.cursorDistance > winX) left -= this.width + this.cursorDistance; else left += this.cursorDistance; if(top + this.height + this.cursorDistance > winY) top -= this.height; else top += this.cursorDistance; this.sobj.left = left + ext; this.sobj.top = top + ext; if(!this.active) { this.sobj.visibility = 'visible'; this.active = true; } } this.hide = function() { if(this.sobj) this.sobj.visibility = 'hidden'; this.active = false; } this.setOpacity = function() { this.sobj.filter = 'alpha(opacity=' + this.opacity + ')'; this.sobj.mozOpacity = '.1'; if(this.obj.filters) this.obj.filters.alpha.opacity = this.opacity; if(!document.all && this.sobj.setProperty) this.sobj.setProperty('-moz-opacity', this.opacity / 100, ''); } } //---------------------------------------------------------------------------------------------------- // Build layer, get mouse coordinates and window width, create tooltip-object //---------------------------------------------------------------------------------------------------- var tooltip = mouseX = mouseY = winX = winY = 0; if(document.layers) { document.write(''); document.captureEvents(Event.MOUSEMOVE); } else document.write('
'); document.onmousemove = getMouseXY; function getMouseXY(e) { if(IE) { bodyScrollTop = document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; bodyScrollLet = document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft; mouseX = event.clientX + bodyScrollLet;//document.body.scrollLeft; mouseY = event.clientY + bodyScrollTop;//document.body.scrollTop; } else { mouseX = e.pageX; mouseY = e.pageY; } if(mouseX < 0) mouseX = 0; if(mouseY < 0) mouseY = 0; else if(GK || NN4) { winX = window.innerWidth - 25; winY = window.innerHeight; } else if(DOM) { winX = document.body.offsetWidth - 25; winY = document.body.offsetHeight; } else { winX = screen.width - 25; winY = screen.height; } if(tooltip && tooltip.active) tooltip.show(); } function toolTip(text, width, opacity) { if(text) { tooltip = new TOOLTIP(); tooltip.text = text; if(width) tooltip.width = width; if(opacity) tooltip.opacity = opacity; tooltip.create(); } else if(tooltip) tooltip.hide(); }