tips（mootools）

/* 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;  }