YUI Port of jQuery TipTip Plugin


This article explains and shares the implementation of the light-weight jQuery plugin TipTip port to YUI. The goal is to clone the plugin behavior, as closely as possible, using YUI.

Getting ready

Read up on the TipTip tooltip plugin. You will find all the documentation for configuring the TipTip widget:

TipTip jQuery Plugin.

The YUI code is a clone of version 1.3.

How do it…

Download and include the yui.tiptip.plugin in your codebase:

YUI({
    combine: true,
    filter: 'raw',

    modules: {
        'yui.tiptip.plugin': {
            fullpath: 'http://domain.com/full/path/to/plugin.js',
            requires: ['event-base', 'node', 'event-mouseenter', 'anim-base', 'anim-easing']
        }
    }
}).use('yui.tiptip.plugin', function(Y) {
    Y.all('#some .selector').tooltip();
});

You will also need to include the CSS from the original jQuery plugin:

TipTip v1.3 CSS

How it works…

Since jQuery DOM functions return iterable/chainable sets of elements, I placed the tooltip function onto the prototype of Y.NodeList, which is vaguely similar. To use you, simply get a NodeList and then call its tooltip function. This will execute the ported TipTip code, displaying a tooltip for all elements in the NodeList. The same options can be passed into the yui version of the tooltip function as in the origin jQuery TipTip plugin, so see the original documentation for details.

To see an example of it working, just hover over the navigation at the top of this page.