Hot!Ajax

 /* Tips 1 */

var Tips1 = new Tips($$('.Tips1')); 

/* Tips 2 */ 

var Tips2 = new Tips($$('.Tips2'), 

{     initialize:function(){ 

this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);     },

onShow: function(toolTip) {        this.fx.start(1);     }, 

onHide: function(toolTip) {        this.fx.start(0);     }  }); 

/* Tips 3 */ 

var Tips3 = new Tips($$('.Tips3'),

{     showDelay: 400,     hideDelay: 400,     fixed: true  }); 

/* Tips 4 */ 

var Tips4 = new Tips($$('.Tips4'),

{     className: 'custom'  });
   

<h3>Tips 1</h3> 

<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1" 

title="Tips Title :: This is my tip content" /> 

<h3>Tips 2</h3>

<img src="/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2" 

title="Tips Title :: This is my tip content" /> 

<h3>Tips 3</h3> 

Fixed tooltip:

<a href="http://www.mootools.net" onclick="return false;" class="Tips3" 

title="Mootools official website">Mootools.net</a> 

<h3>Tips 4</h3> 

Custom className: 

<a href="http://www.mootools.net" onclick="return false;" class="Tips4"

title="Mootools official website">Mootools.net</a>
   

.tool-tip {     color: #fff;     width: 139px;     z-index: 13000;  } 

.tool-title { 

font-weight: bold; 

font-size: 11px; 

margin: 0; 

color: #9FD4FF;

padding: 8px 8px 4px; 

background: url(bubble.png) top left;  }

.tool-text { 

font-size: 11px;

padding: 4px 8px 8px; 

background: url(bubble.png) bottom right;  } 

.custom-tip { 

color: #000; 

idth: 130px; 

z-index: 13000; 

} 

.custom-title 

{ 

fnt-weight: bold; 

font-size: 11px; 

margin: 0; 

color: #3E4F14; 

padding: 8px 8px 4px;

background: #C3DF7D; 

border-bottom: 1px solid #B5CF74;  } 

.custom-text { 

font-size: 11px; 

padding: 4px 8px 8px; 

background: #CFDFA7;  }