API

API A full reference of the libraries inner workings

The API features extensive methods and attributes for interacting with the inner workings of qTip2! Especially useful when in use with other 3rd party plugins.

Accessing the API

The recommended method for gaining access to the API is via the target element. This can only be done after the .qtip() method has been previously called and the tooltip setup. For example:

// Create the tooltip first using regular .qtip() call
var tooltips = $('.selector').qtip({
	/* configuration options here */
});

// Grab the first element in the tooltips array and access its qTip API
var api = tooltips.qtip('api');

You can also gain access to the API via the tooltip element itself, with one important caveat. Tooltips are lazy-loaded into the DOM, so you must ensure that the tooltip is rendered before attempting to access the API, otherwise it won't work. You'll also need to assign an ID so you can easily identify it.

// Grab the API of a tooltip with an `id` of 'apiTest'
var api = $('#qtip-apiTest').qtip('api');

Update multiple API's

You can call any API method (detailed below) on multiple tooltip APIs simply by passing the method name as the first parameter to the .qtip() method:

$('.selector').qtip('reposition'); // Reposition all tooltips belonging to the selected elements
$('.selector').qtip('disable'); // Disable all tooltips belonging to the selected elements

Any subsequent arguments passed will be passed directly to the named API method, for example:

$('.selector').qtip('toggle', true); // Show  all tooltips belonging to the selected elements
$('.selector').qtip('destroy', true); // Immediately destroy all tooltips belonging to the selected elements

You can also use the jQuery UI-style option(s) method, which maps directly to the set and get methods:

// Get the content.text of the first matched element's tooltip
$('.selector').qtip('option', 'content.text');

// Set the content.text of all matched element's tooltips
$('.selector').qtip('option', 'content.text', 'New content');

// The above is equivilent to this long form
$('.selector').each(function() {
	$(this).qtip('api').set('content.text', 'New content');
});

Dot notation

Dot notation is a specific format of String used to reference nested object attributes.

// Example tooltip configuration object
var config = {
	id: 'sampletooltip',
	content: {
		text: 'Hi. I am a sample tooltip!',
		title: 'Sample tooltip'
	}
};

// Example dot notations
api.get('id'); // Returns 'sampletooltip'
api.get('content.text'); // Returns 'My content'
api.get('content.title'); // Returns 'Sample tooltip'

You'll need to use this notation when dealing with the .get() and .set() methods.