MooTools Tip - class

Html

<a href=# class=Tip title='Tip content'>Tip</a>

Javascript

if($$('.Tip') != null){new NaMooTIP();}
var NaMooTIP = new Class({

initialize: function(){ this.tip = $$('.Tip'); this.tipStyle(); this.tipAction(); },

tipAction: function(){ this.tip.each(function(el,i){ el.addEvents({ 'mousemove': function(e){ this.tooltip.setStyles({'top':e.page.y +10}); this.tooltip.setStyles({'left':e.page.x + 10}); }.bind(this),

'mouseenter': function(){ this.tx=''; this.tx = el.get('title'); this.tooltip.set('html',this.tx); el.set('title',''); this.tooltip.setStyles({'opacity':1}); this.tooltip.fade('in'); }.bind(this), 'mouseleave': function(){ el.set('title',this.tx); this.tooltip.fade('out'); }.bind(this) }); },this); },

tipStyle: function(){ this.tooltip = new Element('div',{ styles: { 'opacity':0, 'color':'#fff', 'padding':'7px', 'position':'absolute', 'background':'#000', 'z-index':1000, 'font-size':13, '-webkit-box-shadow':'0 0 10px #fff', 'box-shadow':'0 0 10px #fff' } }).inject(document.body,'top'); } });