Hello! My name's , I'm using qTip at http:// and I think it's !

Note: Points will be deducted for bad grammar and spelling... and sentences that make no sense!

Documentation

 

Checkout some tutorials »

Core options

– #
"String", false

id:false

Overview

A unique string that determines the value of the qTip's "id" attribute that can be used to easily identify this qTip in the document.The attribute is prepended with 'ui-tooltip-'.

Examples

This tooltip will be assigned an "id" value of "ui-tooltip-myTooltip" 
$('.selector').qtip({
	id: 'myTooltip',
	content: {
		text: 'My ID is #ui-tooltip-myTooltip'
	}
});
It can then be easily found in the document via simple jQuery selectors like so: 
$('#ui-tooltip-myTooltip');

Notes

  • By default, this is a unique positive integer.
  • Value must be unique and contain no special characters.
– #
true, false

prerender:false

Overview

By default, tooltips are rendered on thier first show event, rather than on page load. Setting this to true will cause tooltips to be created on page load.

Examples

Create a simple tooltip and create it on page load 
$('.selector').qtip({
	prerender: true,
	content: {
		text: 'My simple tooltip'
	}
});

See also

show.ready

Notes

  • Setting this to true can cause dramatic increases in page load times.
– #
true, false

overwrite:true

Overview

Determines if, then the .qtip() method is called on an element with a qTip already present, the new one overrides (i.e. destroys) the old one. By default this is true.

Examples

Create a tooltip that will not overridde (destroy) the previous qTip, but fail silently: 
/* First tooltip, grabs its content from the title attribute */
$('.selector').qtip();
 
/*
 * Second qTip   - this won't do anything, as we've 
 * instructed it not to overwrite any prior qTip elements.
 */
$('.selector').qtip({
	overwrite: false,
	content: {
		text: 'You won\'t see me... boo!'
	}
});

Notes

  • This option is set to false when using the live event delegation option
– #
true, false

suppress:true

Overview

Determines whether or not the default browser tooltips are suppressed for the selectors elements when the qTip is created. The suppression is accomplished by renaming the 'title' attribute of the elements(s) to 'oldtitle'.

The jQuery .attr() method is overloaded to allow you to grab the title without modifying your current code, by returning 'oldtitle' when requesting the 'title' attribute on elements with qTips present and suppression enabled.

The jQuery .clone() method is also overloaded to return cloned elements, with qTips present, with their regular title attributes intact. If however, you clone the element(s) passing true as the first parameter (thereby cloning not only the element but also any data on it), the 'oldtitle' attribute will remain, and will not be returned to its original 'title' attribute.

Examples

Create a qTip that is shown on click, but doesn't suppress the regular browser tooltip, allowing it to be used as an indicator: 
$('.selector').qtip({
	suppress: false,
	content: {
		text: 'You must have known to click me from the browser tooltip...!?'
	},
	show: {
		event: 'click'
	}
})
.attr('title', 'Click me to show a qTip!'); // Apply a title attribute to the elements

Notes

  • This option is most useful when creating tooltips that don't trigger on mouseover/out
– #
[ Object ]

metadata:{ type: 'class' }

Overview

If you happen to use the jQuery Metadata plugin on your web page, you can utilise it to supply options for your tooltips on a per-element basis. This option object determines the metadata plugins options when called by qTip.

Examples

Let's setup some elements with custom metadata attached via a custom tag: 
<div qtipOpts="{ style: { classes: 'ui-tooltip-blue' } }"><b>Hover me</b> to see a blue tooltip</div>
<div qtipOpts="{ show: { event: 'click' } }"><b>Click me</b> to show a regular tooltip</div>
Now let's attach some tooltips and search for options within the qtipOpts attribute: 
$('div[qtipOpts]').qtip({
	metadata: {
		type: 'attr',
		name: 'qtipOpts'
	},
	content: 'I might look different from all the other tooltips generated by the same .qtip() call...'
});
You can also utilise the new HTML5 data-* attributes in a similar way by setting up your data like so: 
// Elements with data-qtipopts defined as a valid options object will automatically have it merged into the .qtip() calls options.
<div data-qtipopts="{ style: { classes: 'ui-tooltip-green' } }"><b>Hover me</b> to see a green tooltip</div>
...and then specifying 'html5' as you metadata type, along with the data attributes name (the bit after the hyphen): 
$('div[qtipOpts]').qtip({
	metadata: {
		type: 'html5', // Use HTML5 data-* attributes
		name: 'qtipopts' // Grab the metadata from the data-qtipOpts HTML5 attribute
	},
	content: 'I\'m using HTML5 to set my style... so so trendy.'
});

Notes

  • HTML5 data: Make sure not to use data-qtip are your storage location, as it will interfere with qTip as of jQuery 1.4.3! See here for why.
  • For more information on other metadata options, checkout the Metadata Documentation.