A MooTools plugin that displays image tooltips when you rollover links and thumbnails.
JS sample:
#JS
// Just create the object in the DOM ready event
window.addEvent('domready', function() {
var myImageTip = new MooImageTip();
});
// If you want to customize the tip, you can use some options
window.addEvent('domready', function() {
var myAdvancedImageTip = new MooImageTip({
offset: {x: 4, y: 4}, // Offset relative to mouse position
className: 'mylinks', // This is the links class name
tipId: 'mytip', // This is the tip ID, for styling
follow: false, // Tip will not follow the mouse cursor
fx: { duration: 'short' } // Additional Fx options
});
});
HTML code:
#HTML
<div>
Standard tip:
<a href="#" class="imagetip" rel="image.jpg" title="Label">link</a>.
</div>
<div>
Customized tip:
<a href="#" class="mylinks" rel="image.jpg" title="Label">link</a>.
</div>
CSS rules:
#CSS
/* Standard tip styling (default ID is "mooimagetip") */
#mooimagetip {
padding: 5px;
background-color: #CCCCCC; }
/* Customized tip styling (our ID is "mytip") */
#mytip {
padding: 5px;
background-color: #CCCCFF;
}
Implements: Options, Events
Syntax:
#JS
var myImageTip = new MooImageTip(options);
Options (object, optional): Initial options for the class. Options are:
offset: An object like{x: 16, y: 16}(default), that specify the distance of the tip from the mouse cursor.className: Class name of the links to parse (default"imagetip").tipId: ID for the tip element, for styling (default"mooimagetip").follow: IfTRUE(default) tip will follow mouse cursor movements.fx: An object for additionalFxoptions (tip fade in/out).
Events:
shown(me, tip): Fires when the tip is shown.Meis theMooImageTipobject,Tipis the created element.hide(me): Fires when the tip is completely faded out.Meis theMooImageTipobject.hiding(me, tip): Fires when tip is starting to hide.Meis theMooImageTipobject,Tipis the tip element.
Methods:
getTipId(): Gets the tip element ID.