jsfiddle.net, mootools.net/shell, github.com - take your pick. ___
Oskar Krawczyk http://nouincolor.com On Tue, Apr 20, 2010 at 5:36 PM, stratboy <[email protected]> wrote: > Hi you all. Excuse me, I made the thread but didn't follow... Pardon. > > Well, I finally ended up making a small class by myself. It works > simply perfectly for my needs, even ef it can be surely made better, > maybe extended and optimized, but I want to share it with you. Ah, > some of the options are not really implemented, so please, again, > consider it a draft. But it surely works well, so feel free to use it > in your projects. > > var Tooltips = new Class({ > > Implements:[Options,Events], > > options:{ > className:'tip-box', > offset: {x: 16, y: 16} > }, > > //id is intended just as 'identifier', not html id, so it can be > anything, a class or so > initialize: function(id,options){ > this.setOptions(options); > this.id = id; > this.elements = []; > > this.initElements(); > },//end init > > initElements:function(){ > this.elements = $$(this.id); > > this.elements.each(function(elem,index){ > this.buildTip(elem); > },this); > > this.elements.addEvents({ > 'mouseover':function(e){ > var t=($(e.target).match('a')) ? $(e.target) > : $ > (e.target).getParent('a'); > this.showTip(t.retrieve('tip')); > > t.addEvent('mousemove',this.mouseTrack.bindWithEvent(this)); > }.bindWithEvent(this), > > 'mouseout':function(e){ > var t=($(e.target).match('a')) ? $(e.target) > : $ > (e.target).getParent('a'); > this.hideTip(t.retrieve('tip')); > > t.removeEvent('mousemove',this.mouseTrack.bindWithEvent(this)); > }.bindWithEvent(this) > > }); > }, > > buildTip:function(element){ > var tip = new Element('div',{ > 'class':this.options.className, > 'styles':{ > 'display':'none', > 'position':'absolute' > } > }); > > var tipTop = new Element('div',{ 'class':'tip-top' }); > var tipBody = new Element('div',{ 'class':'tip-body' }); > var tipContent = new Element('div',{ 'class':'tip-content' > }); > var tipBottom = new Element('div',{ 'class':'tip-bottom' }); > > tipContent.set('html',element.get('title')); > element.removeProperty('title'); > tipBody.adopt(tipContent); > tip.adopt([tipTop, tipBody, tipBottom]); > tip.inject(document.body); > > element.store('tip',tip); > //todo: add effects > }, > > mouseTrack:function(e){ > var t=($(e.target).match('a')) ? $(e.target) : $ > (e.target).getParent('a'); > var tip = t.retrieve('tip'); > tip.setStyles({ > 'left':e.page.x+this.options.offset.x,'top':e.page.y > +this.options.offset.y, }); > }, > > showTip:function(tip){ > if(tip.getStyle('display') == 'none') > { tip.setStyle('display','block') } > }, > > hideTip:function(tip){ > if(tip.getStyle('display') == 'block') > { tip.setStyle('display','none') } > } > > }); > > window.addEvent('domready',function(){ > var tips = new Tooltips('.thumb-tip'); > }); > > > > > > -- > Subscription settings: > http://groups.google.com/group/mootools-users/subscribe?hl=en >
