ToolTip //JavaScript Class (See related posts)

   1  
   2  //Requires http://www.jsfromhell.com/Geral/event-listener
   3  
   4  //+ Jonas Raoni Soares Silva
   5  //@ http://jsfromhell.com/dhtml/tooltip [v1.0]
   6  
   7  ToolTip = function( toolTipClass, attributeName, followMouse ){
   8  	var i, o = this;
   9  	o.s = ( o.t = document.body.appendChild( document.createElement( "div" ) ) ).style;
  10  	( o.s.display = "none", o.s.position = "absolute", o.t.className = toolTipClass, o.a = attributeName, o.f = followMouse );
  11  	for( i in { mouseout: 0, mouseover: 0, mousemove: 0 } )
  12  		addEventListener( document, i, function( e ){ o[e.type].call( o, e ); } );
  13  };
  14  with( { p: ToolTip.prototype } ){
  15  	p.mouseout = function(){
  16  		this.s.display = "none";
  17  	};
  18  	p.mouseover = function( e ){
  19  		for( var d = document, x = e.target; !x.getAttribute( this.a ) && ( x = x.parentNode ) != d; );
  20  		if( x == d )
  21  			return;
  22  		( this.s.display = "block", this.s.top = e.clientY + "px", this.s.left = e.clientX + "px", e.stopPropagation() );
  23  		this.t.innerHTML = x.getAttribute( this.a );
  24  	};
  25  	p.mousemove = function( e ){
  26  		if( !this.f )
  27  			return;
  28  		this.s.top = e.clientY + "px";
  29  		this.s.left = e.clientX + "px";
  30  	};
  31  }

   1  
   2  
   3  <span style="color:red;" help="aaaaaaaaaaa :)<br /><br /><b>uuuuuuuuuu :(</b>">OIIIIIIIIIIII, PASSA A MÃOZINHA EM MIM XD</span>
   4  <span style="color:green;" help="nooossa !!!!<br /><br /><b>affffffff iiii</b>">LALAAAAAAAAAAAAAAAA</span>
   5  
   6  <script type="text/javascript">
   7  //<![CDATA[
   8  
   9  new ToolTip( "tooltip", "help", true );
  10  
  11  //]]>
  12  </script>