MooImageTip 1.7

A MooTools plugin that displays image tooltips when you rollover links and thumbnails.



Details

Author
Lorenzo Stanco
Current version
1.7
GitHub
lorenzos/MooImageTip
Downloads
28819
Category
Media
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.2.1: '*'

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>

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

Docs

Implements: Options, Events

Syntax:


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.

blog comments powered by Disqus