Tooltip, hovertip - prostě přejížděčky s Prototype / script.aculo.us
January 6th, 2009
Potřeboval jsem nutně “tuhletu přejížděčku” a nechtělo se mi guuuglovat a guuglovat. Není to samozřejmě nic extra, ale za deset minut jsem nebyl schopnej spáchat nic lepšího. Tipy se zobrazují u všech elementů se třídou tip a s atributem alt, který je textem tipu. Tip cca klonuje pozici prvku, ke kterému patří a taky přebírá jeho šířku. Pokud to není žádoucí, navrhuju prostudovat volání metody clonePosition().
JavaScript:
$$(‘*.tip[alt]’).each(function(el){
el.observe(‘mouseover’, show_tip.bindAsEventListener(el))
}, this);
$$(‘*.tip[alt]’).each(function(el){
el.observe(‘mouseout’, hide_tip.bindAsEventListener(el))
}, this);
});
function show_tip(ev)
{
var tip = Builder.node(‘div’, {
style: ‘display:none;position:absolute;’,
id: ‘tip’
},Builder.node(‘p’,this.readAttribute(‘alt’)));
$(‘wrap’).appendChild(tip);
Element.clonePosition(tip,this,{ offsetTop:20, setHeight: false});
new Effect.SlideDown(tip,{duration:0.1});
ev.stop();
}
function hide_tip(ev)
{
new Effect.SlideUp(‘tip’,{duration:0.1});
ev.stop();
Element.remove(‘tip’);
}
Trošku CSS:
#tip p { padding: 3px;}
