Element.implement({
   
    parseClass: function(){
        return this.getProperty('class') == '' ? {} : eval('(' + this.getProperty('class').replace(/.*(\{.*\})/gi, "$1") + ')');
    },
    
    addBoxTooltip: function(){
        this.addEvents({
            'mouseenter': function(){
                var content = this.parseClass();
                var position = this.getPosition();
                var width = this.getWidth();
                
                if ($$('.boxtip').length > 0){
                    var tip = $$('.boxtip')[0];
                    tip.getElement('p').set('text', content.tip);
                } else {
                    var tip = new Element('div', {
                        'class': 'boxtip',
                        'html': '<p>' + content.tip + '</p><div></div>'
                    }).inject($(document.body));
                }
                tip.setStyles({
                    top: position.y.toInt() - tip.getHeight(),
                    display: 'block',
                    left: position.x.toInt() + (tip.getWidth() / 2).toInt()
                });
            },
            'mouseleave': function(){
                $$('.boxtip').setStyles({
                    bottom: 'auto',
                    left: -9999
                });
                 
            }
        });
    }
    
});
window.addEvent('domready', function() {
	$$('div.tooltip').addBoxTooltip();
});