DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets Manager

Snippets has posted 5883 posts at DZone. View Full User Profile

ToolTip //JavaScript Class

09.09.2005

| 7930 views |

        <a href="http://www.jsfromhell.com/dhtml/tooltip">

[UPDATED CODE AND HELP CAN BE FOUND HERE]
</a>

@REQUIRES <a href="http://www.jsfromhell.com/geral/event-listener">Event-Listener</a>

//Requires http://www.jsfromhell.com/Geral/event-listener

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/dhtml/tooltip [v1.0]

ToolTip = function( toolTipClass, attributeName, followMouse ){
	var i, o = this;
	o.s = ( o.t = document.body.appendChild( document.createElement( "div" ) ) ).style;
	( o.s.display = "none", o.s.position = "absolute", o.t.className = toolTipClass, o.a = attributeName, o.f = followMouse );
	for( i in { mouseout: 0, mouseover: 0, mousemove: 0 } )
		addEventListener( document, i, function( e ){ o[e.type].call( o, e ); } );
};
with( { p: ToolTip.prototype } ){
	p.mouseout = function(){
		this.s.display = "none";
	};
	p.mouseover = function( e ){
		for( var d = document, x = e.target; !x.getAttribute( this.a ) && ( x = x.parentNode ) != d; );
		if( x == d )
			return;
		( this.s.display = "block", this.s.top = e.clientY + "px", this.s.left = e.clientX + "px", e.stopPropagation() );
		this.t.innerHTML = x.getAttribute( this.a );
	};
	p.mousemove = function( e ){
		if( !this.f )
			return;
		this.s.top = e.clientY + "px";
		this.s.left = e.clientX + "px";
	};
}



Example


<span style="color:red;" help="aaaaaaaaaaa :)<br /><br /><b>uuuuuuuuuu :(</b>">OIIIIIIIIIIII, PASSA A MÃƒOZINHA EM MIM XD</span>
<span style="color:green;" help="nooossa !!!!<br /><br /><b>affffffff iiii</b>">LALAAAAAAAAAAAAAAAA</span>

<script type="text/javascript">
//<![CDATA[

new ToolTip( "tooltip", "help", true );

//]]>
</script>

Tags: