mootools

References to Documentation

1. Native/Element.js#$$
2. Plugins/Tips.js#Tips
3. Effects/Fx-Style.js#Fx.Style
4. Effects/Fx-Style.js#Fx.Style.start

/* 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;
	width: 130px;
	z-index: 13000;
}
 
.custom-title {
	font-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;
}