
Display a tip on any element with a title and/or href.
title
option but for tip-text. By default it either uses the rel
or the href
attribute as tip-text.id
to the tooltip element, required for WAI-ARIA support.id
option to be set. Enable WAI-ARIA support. Adds aria-attributes to the tooltip.function(tip, hovered){ tip.setStyle('display', 'block'); }
) The default function for the show event, passes the tip element and the currently hovered element.function(tip, hovered){ tip.setStyle('display', 'none'); }
) The default function for the hide event, passes the currently hovered element.<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />
var myTips = new Tips('.thisisatooltip');
onShow(tip)
myTips.addEvent('show', function(tip, el){ tip.addClass('someCustomClassBecauseTheTipIsVisible'); });
To override the default tip show behavior, you must either declare the onShow event in the options on initialization or remove the onShow event from the class yourself. Example:
var myTips = new Tips('.thisisatooltip', { onShow: function(tip, el){ tip.setStyles({ visibility: 'hidden' display: 'block' }).fade('in'); } }); //if you want to add this after init myTips.removeEvents('show').addEvent('show', function(tip, el){ tip.setStyles({ visibility: 'hidden' display: 'block' }).fade('in'); });
onHide(tip)
myTips.addEvent('hide', function(tip, el){ tip.removeClass('someCustomClassBecauseTheTipIsVisible'); });
To override the default tip hide behavior, you must either declare the onHide event in the options on initialization or remove the onHide event from the class yourself. Example:
var myTips = new Tips('.thisisatooltip', { onHide: function(tip, el){ tip.fade('out').get('tween').chain(function(){ tip.setStyle('display', 'none'); }); } }); //if you want to add this after init myTips.removeEvents('hide').addEvent('hide', function(tip, el){ tip.fade('out').get('tween').chain(function(){ tip.setStyle('display', 'none'); }); });
Updates the tip title. Note that the title is re-assigned when the tip is hidden and displayed again; this method allows you to change it after it's visible.
myTips.setTitle(title);
myTips.setTitle("I'm the new title!");
Updates the tip text. Note that the text is re-assigned when the tip is hidden and displayed again; this method allows you to change it after it's visible.
myTips.setText(text);
myTips.setText("I'm the new body text!");
Attaches tooltips to elements. Useful to add more elements to a tips instance.
myTips.attach(elements);
myTips.attach('a.thisisatip');
Detaches tooltips from elements. Useful to remove elements from a tips instance.
myTips.detach(elements);
myTips.detach('a.thisisatip');
<div class="options.className"> //the className you pass in options will be assigned here. <div class="tip-top"></div> //useful for styling <div class="tip"> <div class="tip-title"></div> <div class="tip-text"></div> </div> <div class="tip-bottom"></div> //useful for styling </div>
You can also assign tips titles and contents via Element Storage.
<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />
$('tip1').store('tip:title', 'custom title for tip 1'); $('tip1').store('tip:text', 'custom text for tip 1');
If you use tips storage you can use elements and / or html as tips title and text.
© Linux.ria.ua, 2008-2024 |