Implementation of jGrowl using qTip2 Library

gistfile1.js

$(document).ready(function()
{
	$('button').click(function() {
		// Check if it should be persistent (can set to a normal bool if you like!)
		createGrowl( $(this).hasClass('persistent') );
	});

	// Make it a window property see we can call it outside via createGrowls() at any point
	window.createGrowl = function(persistent) {
		// Use the last visible jGrowl qtip as our positioning target
		var target = $('.qtip.jgrowl:visible:last');

		// Create your jGrowl qTip...
		$(document.body).qtip({
			// Any content config you want here really.... go wild!
			content: {
				text: 'Testing out our jGrowl implementation (persistent: ' + persistent + ')',
				title: {
					text: 'Attention!',
					button: true
				}
			},
			position: {
				my: 'top right', // Not really important...
				at: (target.length ? 'bottom' : 'top') + ' right', // If target is window use 'top right' instead of 'bottom right'
				target: target.length ? target : $(document.body), // Use our target declared above
				adjust: { y: 5 }, // Add some vertical spacing

				/* ======================================================================
				 * THIS ISN'T NEEDED, BUT IT MAKES FOR SOME NICE VISUALS!
				 * (Check the footer below to see why we're setting the position data)
				 * =======================================================================
				 */
				effect: function(api, position) {
					$(this).data('toPosition', position).animate(position, { duration: 200, easing: 'swing', queue: false });
				}
			},
			show: {
				event: false, // Don't show it on a regular event
				ready: true, // Show it when ready (rendered)
				effect: function() { $(this).stop(0,1).fadeIn(400); }, // Matches the hide effect
				
				// Custom option for use with the .get()/.set() API, awesome!
				persistent: persistent
			},
			hide: {
				event: false, // Don't hide it on a regular event
				effect: function(api) { 
					// Do a regular fadeOut, but add some spice!
					$(this).stop(0,1).fadeOut(400).queue(function() {
						// Destroy this tooltip after fading out
						api.destroy();

						// Update positions
						updateGrowls();
					})
				}
			},
			style: {
				classes: 'jgrowl ui-tooltip-dark ui-tooltip-rounded', // Some nice visual classes
				tip: false // No tips for this one (optional ofcourse)
			},
			events: {
				render: function(event, api) {
					// Trigger the timer (below) on render
					$(this).trigger('mouseout');
				}
			}
		})
		.removeData('qtip');
	};

	// Make it a window property see we can call it outside via updateGrowls() at any point
	window.updateGrowls = function() {
		// Loop over each jGrowl qTip
		var each = $('.qtip.jgrowl:not(:animated)');
		each.each(function(i) {
			var api = $(this).data('qtip');

			// Set the target option directly to prevent reposition() from being called twice.
			api.options.position.target = !i ? $(document.body) : each.eq(i - 1);
			api.set('position.at', (!i ? 'top' : 'bottom') + ' right');
		});
	};

	// Utilise delegate so we don't ahve to rebind for every qTip!
	$(document).delegate('.qtip.jgrowl', 'mouseover mouseout', function(event) {
		var api = $(this).qtip('api'),
			lifespan = 5000; // 5 second lifespan
		
		// If persistent is set to true, don't do anything.
		if(api.get('show.persistent') === true) { return; }

		// Otherwise, start/clear the timer depending on event type
		if(event.type === 'mouseover') {
			clearTimeout(api.timer);
		}
		else {
			api.timer = setTimeout(api.hide, lifespan);
		}
	});
	
	/* ======================================================================
	 * THIS IS NEEDED FOR THE POSITION EFFECT TO WORK PROPERLY!!!!!!!!!!!!!!
	 * 
	 * Because we use .animate() for our positioning, as soon as the next
	 * tooltip in the .each() chain has its position update, the previous one
	 * won't have actually moved (since it's still at the starting point of
	 * the animation.
	 
	 * To get around this, we set the new position as some .data() on our
	 * tooltip element, and override the default offset() method with a custom
	 * one that checks to see if the element is a jGrowl qTip, and the position 
	 * data is present. If so it returns this, and therefore allows the 
	 * positioning system to work without any alterations. 
	 * 
	 * Neat huh?
	 * =======================================================================
	 */
	$.fn.oldOffset = $.fn.offset; // Store the old function :)
	$.fn.offset = function() {
		// Grab the position data set above in our position.effect method
		var pos = $(this).data('toPosition'); 
		
		/* If the data was present and the target element is a jGrowl qtip, 
		 * return the position data, otherwise use the original offset() method!
		 */
		return $(this).hasClass('qtip') && $(this).hasClass('jgrowl') && pos ? pos : $.fn.oldOffset.apply(this, arguments);
	}
});