HTML markup:
<div> Standard tip: <a href="#" class="imagetip" data-image="image.jpg" title="Label">link</a>. </div> <div> Customized tip: <a href="#" class="mylinks" data-image="image.jpg" title="Label">link</a>. </div>
JS code:
// 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 }); });
CSS rules:
/* 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:
var myImageTip = new MooImageTip(options);
Options (object, optional): Initial options for the class. Options are:
Events:
Methods:
A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.
Found a bug in this plugin? Please report it this repository's Github Issues.
blog comments powered by Disqus