//////////// // [ubertooltip.js] v1.6 // 2002-07-23 // Author: chrisken // URL: http://www.cs.utexas.edu/users/chrisken/ubertooltip.html // Supports: alphaAPI.js //// // wrapper to automate the tooltip install function installTip() { if( document.layers ) return; // ns4 = bad function mouseMove(e) { if( window.tip ) tip.mouseMove( e ); } // update tooltip coordinates if the object exists document.onmousemove = mouseMove; // capture mouse movement in IE/Opera if( document.addEventListener ) document.addEventListener( "mousemove", mouseMove, true ); // capture in Mozilla/NS6 writeTip( 'tipDiv' ); // Create abstract functions until the page has loaded and a full ubertooltip can be created tip = new Object(); tip.show = function( x ) { }; tip.hide = function( x ) { }; tip.mouseMove = function( x ) { }; tip.loaded = false; } // outputs the tooltip
with the minimum amount of css function writeTip( divName ) { document.write( '' ); } function uberToolTip( id, delay ) { this.id = id || "tipDiv"; this.mouseX = 0; this.mouseY = 0; this.updateToolTip = false; this.obj = null; this.fader = null; this.delay = delay || 40; this.getMouseX = function() { return this.mouseX; } this.getMouseY = function() { return this.mouseY; } // display (fade in, if supported) the tooltip and update coords when the mouse moves this.show = function( html ) { if( document.layers || window.opera ) return; this.updateToolTip = true; if( this.fader ) { // alphaAPI was included and the browser supports fading this.fader.setTrans( 0 ); this.fader.fadeIn(); } this.update(); writeLayerObj( this.obj, html ); showLayerObj( this.obj ); } // update coordinates of the layer based on mouse coords; this.update = function() { this.obj.style.left = this.getMouseX() + 13; this.obj.style.top = this.getMouseY() + ( document.all? 20: 15 ); } // hide layer and stop updating with mouse this.hide = function() { if( document.layers || window.opera ) return; hideLayerObj( this.obj ); this.updateToolTip = false; if( this.fader ) this.fader.setTrans( 0 ); this.obj.style.left = this.obj.style.top = 0; writeLayerObj( this.obj, "" ); } // grab a reference to the
and initialize the fader this.init = function() { if( document.layers || window.opera ) return; this.obj = document.getLayer( this.id ); if( !this.obj ) { alert( 'Error: tooltip layer initialized to "' + this.id + '",\nbut a
with that id does not exist.' ); return; } this.loaded = true; if( window.alphaAPI && !document.layers && ( document.all || ( document.getElementById && document.addEventListener ) ) ) { // only allow IE and Mozilla this.fader = new alphaAPI( this.id, this.delay, null, 100, 0, null, 10 ); this.fader.setTrans( 0 ); this.fader.norepeat( ); } } this.mouseMove = function( e ) { var mouseX, mouseY; if( window.event && !document.layers ) { // Internet Explorer & Opera mouse detection mouseX = event.clientX; mouseX += document.body.scrollLeft; mouseY = event.clientY; mouseY += document.body.scrollTop; } else { // Netscape and Mozilla mouseX = e.pageX; mouseY = e.pageY + 10; } this.mouseX = mouseX; this.mouseY = mouseY; if( this.obj && this.updateToolTip ) this.update(); } return this; } /////// // Mini-dhtml library with NS4 support removed //// // Use getLayer so that IE 4 works the same as IE 5+ & Mozilla if( document.getElementById ) document.getLayer = document.getElementById; else if( document.all ) document.getLayer = function( id ){ return document.all[ id ]; } // wrapper to showLayerObj function showLayer( id ) { showLayerObj( document.getLayer( id ) ); } // show a layer object function showLayerObj( layer ) { layer.style.visibility = "visible"; } // wrapper to hideLayerObj function hideLayer( id ) { hideLayerObj( document.getLayer( id ) ); } // hide a layer object function hideLayerObj( layer ) { layer.style.visibility = "hidden"; } // wrapper to writeLayerObj function writeLayer( id, html ) { writeLayerObj( document.getLayer( id ), html ); } // write html to a layer function writeLayerObj( layer, html ) { // pass in the layer object if( typeof( layer.innerHTML ) == "undefined" ) { if( !document.layers ) { // Opera } else { // Netscape } } else { // IE and Mozilla are cool html = html.replace(/&/,"&"); layer.innerHTML = html; } } // set autoInstall to false if you want to customize your uberTooltip installation if( !window.autoInstall && window.autoInstall != false) installTip();