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
