/*
+-------------------------------------------------------------------+
| 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 = '
';
if(NN4) {
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();
}