How to use

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>

1. <div>
2. Standard tip:
3. <a href="#" class="imagetip" data-image="image.jpg" title="Label">link</a>.
4. </div>
6. <div>
7. Customized tip:
8. <a href="#" class="mylinks" data-image="image.jpg" title="Label">link</a>.
9. </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
    });
});

1. // Just create the object in the DOM ready event
2. window.addEvent('domready', function() {
3. var myImageTip = new MooImageTip();
4. });
6. // If you want to customize the tip, you can use some options
7. window.addEvent('domready', function() {
8. var myAdvancedImageTip = new MooImageTip({
9. offset: { x: 4, y: 4 }, // Offset relative to mouse position
10. className: 'mylinks', // This is the links class name
11. tipId: 'mytip', // This is the tip ID, for styling
12. follow: false, // Tip will not follow the mouse cursor
13. fx: { duration: 'short' } // Additional Fx options
14. });
15. });

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;
}

1. /* Standard tip styling (default ID is "mooimagetip") */
2. #mooimagetip {
3. padding: 5px;
4. background-color: #CCCCCC; }
6. /* Customized tip styling (our ID is "mytip") */
7. #mytip {
8. padding: 5px;
9. background-color: #CCCCFF;
10. }

Docs

Implements: Options, Events

Syntax:

var myImageTip = new MooImageTip(options);

1. 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: If TRUE (default) tip will follow mouse cursor movements.
• fx: An object for additional Fx options (tip fade in/out).
• source: Attribute name in which you place the image URL (default "data-image").

Events:

• shown(me, tip): Fires when the tip is shown. Me is the MooImageTip object, Tip is the created element.
• hide(me): Fires when the tip is completely faded out. Me is the MooImageTip object.
• hiding(me, tip): Fires when tip is starting to hide. Me is the MooImageTip object, Tip is the tip element.

Methods:

• getTipId(): Gets the tip element ID.

Discuss

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.