Shorthand options

Several of the main options have shorthand notation for declaring their values. Most notable of these are the main option objects. If any of the main options e.g. show, position, are declared as non-objects, they map to a specific sub-option within it when parsed. An example:

$('.selector').qtip({
	content: 'Short hand notation'
});
$('.selector').qtip({
	content: {
		text: 'Long hand notation' // Notice that content.text is long-hand for simply declaring content as a string
	}
});

Here's a list of all available short hands:

metadata: 'string' -> metadata: { type: 'string' }
content: 'string' -> content: { text: 'string' }
position: 'string' -> position: { my: 'string', at: 'string' } // This one is special - it maps to two options (my & at)
show: 'string' -> show: { event: 'string' }
show: $('.selector') -> show: { target: $('.selector') }
hide: 'string' -> hide: { event: 'string' }
hide: $('.selector') -> hide: { target: $('.selector') }
style: 'string' -> style: { classes: 'string' }
 
/* Plugin-specific */
style: { tip: 'string or boolean' } -> style: { tip: { corner: 'string or boolean' } }
show: { modal: boolean } -> show: { modal: { on: boolean } }

NB Shorthand notation is only of help when you don't need to specify any other options for the object except for the sub-option(s) it maps to!

Shared Options

Sometimes when using qTip you may find that you're creating multiple different qTips, but a lot of the options used for them are the same. If this is the case, you can dramatically reduce duplicate code by using a common, shared option object. For example:

$('.selector').qtip({
	content: 'An example tooltip',
	position: {
		my: 'top left', 
		at: 'bottom right'
	},
	show: 'click',
	hide: 'click',
	style: {
		tip: true,
		classes: 'ui-tooltip-red'
	}
});

$('.selector').qtip({
	content: 'Another example tooltip',
	position: {
		my: 'top left', 
		at: 'bottom right'
	},
	show: 'click'
	hide: 'click',
	style: { 
		tip: true,
		classes: 'ui-tooltip-dark'
	}
});

These two tooltips, although containing different content and styles, share most of the same options. That's quite a lot of code duplication… so what can we do about this? Enter jQuery.extend!

Before we dive into jQuery.extend, it's more useful to look at an example of it in use first. Here's how we can simplify the code above:

// A shared object containing all the values you want shared between your tooltips
var shared = {
	position: {
		my: 'top left', 
		at: 'bottom right',
	},
	show: 'click',
	hide: 'click',
	style {
		tip: true
	}
});
 
// Setup our first tooltip, adding some other options
$('.selector').qtip( $.extend({}, shared, { 
	content: 'An example tooltip',
	style: {
		classes: 'ui-tooltip-red'
	}
}));
 
// Setup our second tooltip, again adding some new options
$('.selector2').qtip( $.extend({}, shared, { 
	content: 'Another example tooltip',
	style: {
		classes: 'ui-tooltip-dark'
	}
}));

If you take a good look at the code, you'll notice this statement:

$.extend({}, shared, { ... })

This statement is essentially saying: Take an empty object, add all the properties of the shared object, and then these options too. Note that the order is important, as options are overridden in one object, if they are also present in the object immediately proceeding it e.g. to it's right.

NB Make sure to take a good look through the jQuery.extend documentation over at the jQuery site for more information on this.

Custom effects

qTip used to come packed with 3 default effects: fade, slide and grow. Slide and grow have been removed in 2.x in favour of user-defined effects. Let's take a look at their equivalents using custom effect callbacks:

// Slide up/down effects
effect: function() { $(this).slideDown(100); } // Show
effect: function() { $(this).slideUp(100); } // Hide
 
// Grow effects
effect: function() { $(this).show(100); } // Show
effect: function() { $(this).hide(100); } // Hide

As you might guess, you're not limited to just the usual hide/show methods either. You can utilise the .animate method to create some pretty groovy effects:

// Shrink to the left and fade out
effect: function() { $(this).animate({ width: 0, opacity: 0 }, { duration: 100 }); }
 
// Can even use jQuery UI's custom effects
effect: function() { $(this).show('slide', null, 100); }
effect: function() { $(this).hide('bounce', null, 100); }

The possibilities are pretty much endless, so go forth young padawan!