mBox Documentation
The mBox.Tooltip class extends mBox.Core, helping you to attach tooltips to any DOM element.
Attach your tooltips to elements
Attaching your tooltips works the same way as with mBox.Core, use the option attach:
new mBox.Tooltip({ content: 'Default tooltip.', attach: 'myTooltip1' });
If you want your tooltips to open with mouseclick instead, set the option event back to click:
new mBox.Tooltip({ content: 'This tooltip opens on mouseclick.', attach: 'myTooltip2', event: 'click' });
To attach your tooltip to more than one element, use a class-name and optionally set the option setContent to change your tooltips content for each element:
<a … class="myTooltip" data-myTooltip="My tooltip 1">Hover me</a> <a … class="myTooltip" data-myTooltip="My tooltip 2">Hover me</a> <a … class="myTooltip" data-myTooltip="My tooltip 3">Hover me</a>
new mBox.Tooltip({ setContent: 'data-myTooltip', attach: 'myTooltip' });
To make things even easier you can attach your tooltips to the attributes name instead of the class-name:
<a … data-tooltip="My tooltip 1">Hover me</a> <a … data-tooltip="My tooltip 2">Hover me</a> <a … data-tooltip="My tooltip 3">Hover me</a>
new mBox.Tooltip({ setContent: 'data-tooltip', attach: $$('*[data-tooltip]') });
The pointer
By default, your tooltips pointer is centered, but you can adjust its position and its offset:
new mBox.Tooltip({ content: 'This tooltips pointer is at the right.', pointer: 'right', attach: 'myTooltip3' });
new mBox.Tooltip({ content: 'This tooltips pointer is at the top and has an offset of 10 pixel.', pointer: ['top', 10], width: 80, position: { x: 'left', y: 'center' }, attach: 'myTooltip4' });
new mBox.Tooltip({ content: 'This tooltip doesn\'t have a pointer.', pointer: false, attach: 'myTooltip5' });
Transition
Add a transition to your tooltips to spice them up:
new mBox.Tooltip({ content: 'This tooltip flies in.', transition: 'flyin', attach: 'myTooltip6' });
new mBox.Tooltip({ content: 'This tooltip bounces in and flies out.', transition: 'bouncefly', attach: 'myTooltip7' });
You can use following transition-shortcuts:
'flyin', 'flyout', 'flyinout', 'flyoutin', 'bounce', 'bouncefly'
Options
Refer to mBox.Core Options for a complete list of options.