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:

    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.

Augmenting YUI3 Module Objects

In YUI 2 augmenting a library class is as simple as appending functions to the static object or modifying the prototype of a non-static object. Augmenting objects in YUI 3 is almost as easy, differing only in the augmentation having to be applied inside of a YUI().add() function. Although, augmenting objects is not difficult, it feels complicated until you become used to the YUI 3 way of coding. This article will cover how to augment ...

YUI Cookie Storage Engine

In the YUI Storage Utility article, we covered the new utility method added into YUI 2.8 for storing large amounts of data client-side using JavaScript. The utility uses a variety of engines to make this possible, and was written to be easily extensible, so developers can write and add their own engines. This article will walk through how to create a simple engine using browser cookies. For starters, I do not recommending using this ...

YUI Storage Utility

YUI 2.8 came out last week while I was on vacation. There are many improvements, including a Storage Utility (by me) that allows developers to store large amounts of textual data client-side, regardless of whether the browser supports the proposed HTML 5 specification or not. The package does this by using one of three storage engines (HTML 5, Google Gears, or SWF), although each engine has its own limitations (see documentation). However, ...

Comparing Widget in Y2 Versus Y3

I have been wanting to do a YUI 2 versus YUI 3 comparison for some time, and it took a while to design a simple example that was complex enough to be meaningful. Anyway, for this comparison I wrote a simple CheckboxList widget, that renders a list of checkboxes and labels from a JSON object. Both versions will require only a DOM node to instantiate, they will include two custom events onCheck and onBeforeCheck, and ...

Adding a Library Class to YUI 3

The upcoming release of YUI 3 is going to change the way we develop using the YUI framework. Instead of namespacing the library behind the YAHOO object, as was done in YUI 2, in YUI 3 the library will be referenced in isolated functional contexts by calling "YUI().use". Thus developers need to modify their code to wrap everything that uses the YUI library with a "YUI().use" call.

Example 1: Calling YUI().use

YUI().use(widget, function(Y) ...

Leverating YAHOO.env._id_counter for Unique Ids

This topic was originally covered in the Unique Id Generator article, where you can find more a heavy-handed solution, allowing a developer to determine the character set used for and length of the generated id. However, as most of the commenters pointed out, there is a simpler way to create unique numbers that will work for most developers; that is to increment a global number each time it is used. YUI already has a ...

YUI-EXT-MVC Controller, Adding Command AJAX Pattern

Todays article covers a new feature added to the AJAX control system of the YUI-EXT-MVC Controller (Controller.js). This feature leverages the command pattern, as originally proposed in Data Singleton For Ajax Request, to retrieve and cache data from the server. A new call method was added to the Controller object, which sends only one request to the server to fetch AJAX data, but can be called repeatedly to retrieve data. A callback function ...

YUI EXT MVC Controller

The AJAX control system of the YUI-EXT-MVC Controller has been tested and made available, Controller.js. Currently, it is mostly a simplified wrapper around YUIs Connection Manager, allowing the same functionality with additional support for registering callbacks and defining the expected response type. The Controller also contains logic to force all developer specified callbacks through a common set of wrapper functions by using the CustomEvents of Connection Manager. This allows for generic AJAX abort/failure ...


Last week, I came to the conclusion that this blog is not an affective tool for managing the YAHOO Extension MVC Library, as it is being supported for readers of this blog, two of my side projects, and soon it will be incorporated into the next version of Mint.com. Already, since the librarys release last week, there has been dozens of improvements. To keep you all up-to-date, I am moving the codebase to ...