Tooltip

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small "hover box" appears with supplementary information regarding the item being hovered over.

Cod:

tooltip = { showEvent : "mousemove" , hideEvent : "mouseout" , xCursor : -1, xPadding : 15, yCursor : -1, yPadding : 15, ttPrefix : "for", ttClassName : "tooltip", tts : {}, timeouts : {}, status : {}, senders : { }, show_delay : 500, hide_delay : 300, autoMoveToCUrsor : true, /* ******************************************************* */ getMouseCoord : function ( e ) { if ( typeof( event ) != 'undefined' ) { tooltip.xCursor = event.clientX; tooltip.yCursor = event.clientY; } else { tooltip.xCursor = e.pageX; tooltip.yCursor = e.pageY; } // DEBUG // document.title = tooltip.xCursor + " :: " +tooltip.yCursor; }, /*************************************************************/ addEventListener : function (sender, e, l ) { sender["on"+e] = l; }, /* ********************************************************* */ init : function() { var clsRegExp = new RegExp("(^|\s)" + tooltip.ttClassName + "(\s|$)"); var forRegExp = new RegExp("(^|\s)" + tooltip.ttPrefix ); var allElements = document.body.getElementsByTagName("*"); var curent, prev; for ( var i=0; i < allElements.length; i++ ) { curent = allElements[i]; if ( clsRegExp.test ( curent.className ) ) { prev = allElements[i-1]; tooltip.addEventListener ( prev, tooltip.showEvent, tooltip.showTT ); tooltip.addEventListener ( prev, tooltip.hideEvent, tooltip.hideTT ); /* tooltip.addEventListener ( curent, "mousemove", tooltip.holdTT ); tooltip.addEventListener ( curent, "mouseout", tooltip.hideTT );*/ if ( prev.id == "" ) prev.id = tooltip.genID(); if ( curent.id == "" ) curent.id = tooltip.genID(); tooltip.tts[prev.id] = curent.id; tooltip.senders[curent.id] = prev.id; } else if ( forRegExp.test ( curent.className ) ) { var x = curent.className.indexOf ( tooltip.ttPrefix ) ; var y = curent.className.indexOf ( ' ', x ); y = ( y == -1 ) ? curent.className.length : y; var prevID = curent.className.substring(x+4, y ); prev = document.getElementById ( prevID ); if ( prev ) { tooltip.addEventListener ( prev, tooltip.showEvent, tooltip.showTT ); tooltip.addEventListener ( prev, tooltip.hideEvent, tooltip.hideTT ); /* tooltip.addEventListener ( curent, "mousemove", tooltip.holdTT ); tooltip.addEventListener ( curent, "mouseout", tooltip.hideTT );*/ if ( prev.id == "" ) prev.id = tooltip.genID(); if ( curent.id == "" ) curent.id = tooltip.genID(); tooltip.tts[prev.id] = curent.id; tooltip.senders[curent.id] = prev.id; } } } }, /* ********************************************************** */ showTT : function () { if ( tooltip.status[ this.id ] != "show" && tooltip.status[ this.id ] != "shown" ) { tooltip.timeouts[ this.id ] = setTimeout ( "tooltip.show('"+this.id+"');", tooltip.show_delay ); tooltip.status [ this.id ] = "show"; } else if ( tooltip.status[this.id] == "shown" ) { if ( tooltip.autoMoveToCUrsor ) { tt.style.left = (tooltip.xCursor + tooltip.xPadding) + "px"; tt.style.top = (tooltip.yCursor + tooltip.yPadding) + "px"; } } }, /* ************************************************ */ show : function ( id ) { // // tooltip-urile afisate se ascund var allElements = document.body.getElementsByTagName("*"); for ( var i=0; i< allElements.length;i++ ) { tmp = allElements[i]; if ( tmp.id != "" ) { if ( tooltip.status[tmp.id] == "shown" || tooltip.status[tmp.id] == "show" ) { tmp_tt = document.getElementById(tooltip.tts[tmp.id]); tmp_tt.style.display = "none"; } } } tt = document.getElementById( tooltip.tts[ id ] ); tt.style.display = "block"; tooltip.status[ id ] = "shown"; tt.style.left = (tooltip.xCursor + tooltip.xPadding) + "px"; tt.style.top = (tooltip.yCursor + tooltip.yPadding) + "px"; clearTimeout ( tooltip.timeouts[id] ); }, /* ************************************************* */ hideTT : function () { tooltip.timeouts[ this.id ] = setTimeout ( "tooltip.hide('"+this.id+"');", tooltip.hide_delay ); tooltip.status [ this.id ] = "hide"; }, /* ************************************************* */ hide : function ( id ) { tt = document.getElementById( tooltip.tts[ id ] ); if ( tt == null ) tt = document.getElementById( id ); tt.style.display = "none"; clearTimeout ( tooltip.timeouts[id] ); clearTimeout ( tooltip.timeouts[ tooltip.senders[id] ] ); }, /* ************************************************* */ // holdTT : function ( ) { // tooltip.status[ tooltip.senders[this.id] ] = "hold"; // clearTimeout ( tooltip.timeouts[ tooltip.senders[ this.id] ]); // }, /* ************************************************* */ genID : function () { var id = new String("tooltip"); var i = 1; while ( document.getElementById ( id + i ) ) { i++ }; return id + i; } } tooltip.addEventListener ( window, "load", tooltip.init ); tooltip.addEventListener ( document, "mousemove", tooltip.getMouseCoord );