Content

Content what is going inside your tooltip? And how?

The content object defines what content will be displayed within the tooltip, as well as the the title of the tooltip and various other aspects.

content.text

Values

Deferred, function(){}, jQuery([ ]), "String", true (Default: true)

Overview

Content which will appear inside the tooltip initially. If set to true the title attribute of the target will be used, if available.

You can also specify a function that returns the content, which will be run on each consecutive show event. This function can return both static textual content (text or HTML), or a Deferred object (see below) The function is executed with its scope as the target element, along with both an event and api argument(s) respectively.

Deferred content

A Deferred object may be used as the value, with both progress() and done() handlers causing the content to be set. The content will not be set upon rejection.

Examples

This will create a default tooltip with the content 'My tooltip content'

$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	}
});

We can also use another jQuery element as the tooltip content:

$('.selector').qtip({
	content: {
		text: $('.selector2') // Add .clone() if you don't want the matched elements to be removed, but simply copied
	}
});

We can also use a custom function to retrieve special attributes from the target element on each show event:

$('.selector').qtip({
	content: {
		text: function(event, api) {
			// Retrieve content from custom attribute of the $('.selector') elements.
			return $(this).attr('qtip-content');
		}
	}
});

Finally, we can utilise the above with jQuery's Deferred objects to grab content via an .ajax() call:

$('.selector').qtip({
	content: {
		text: function(event, api) {
			$.ajax({ url: 'custom/content.html' })
				.done(function(html) {
					api.set('content.text', html)
				})
				.fail(function(xhr, status, error) {
					api.set('content.text', status + ': ' + error)
				})

			return 'Loading...';
		}
	}
});

Notes

• If no valid content can be detected in both this and the below content.attr option, no tooltip will be rendered.
• Custom functions that return no valid content will still cause the tooltip to be created! Replace these with an each() loop if this is not the desired behaviour.

See also

• content.title

---

content.attr

Values

"String" (Default: "title")

Overview

Attribute of the target element to use for content if none is provided with the above content.text option, or no valid content can be found.

Examples

Let's create qTip's on all images whose content is provided by the elements ALT attribute

$('img[alt]').qtip({
	content: {
		attr: 'alt'
	}
});

This is useful for image galleries and other image-oriented sites that need to provide nice visual cues of their context.

Notes

• If no valid content is found within the elements attribute, and content.text is not defined, no tooltip will be rendered.

See also

• content.text

---

content.title

Values

Deferred, function(){}, jQuery([ ]), "String", true (Default: true)

Overview

Content which will appear inside the tooltip initially. If set to true the title attribute of the target will be used, if available.

You can also specify an function that returns the content, which will be run on each consecutive show event. This function can return both static textual content (text or HTML), or a Deferred object (see below) The function is executed with its scope as the target element, along with both an event and api argument(s) respectively.

Deferred content

A Deferred object may be used as the value, with both progress() and done() handlers causing the content to be set. The content will not be set upon rejection.

Examples

Create an "About me" tooltip with a title to indicate what the contents are about:

$('.selector').qtip({
	content: {
		text: 'I really like owls!',
		title: 'About me'
	}
});

We can also use another jQuery element as the tooltip title:

$('.selector').qtip({
	content: {
		title: $('.selector2') // Add .clone() if you don't want the matched elements to be removed, but simply copied
	}
});

We can also use a custom function to return the title text:

$('.selector').qtip({
	content: {
		text: 'Custom title text functions... hoorah!',
		title: function(event, api) {
			// Retrieve content from ALT attribute of the $('.selector') element
			return $(this).attr('alt');
		}
	}
});

Finally, we can utilise the above with jQuery's Deferred objects to grab content via an .ajax() call:

$('.selector').qtip({
	content: {
		text: 'AJAX calll... but just for the title content!',
		title: function(event, api) {
			$.ajax({ url: 'custom/content.html' })
				.done(function(html) {
					api.set('content.title', html)
				})
				.fail(function(xhr, status, error) {
					api.set('content.title', status + ': ' + error)
				})

			return 'Loading...';
		}
	}
});

Notes

• Prior to qTip 2.1, this option was known as content.title.text, which is still supported but deprecated.
• If no valid content is provided, the title will not be created.

See Also

• content.text

---

content.button

Values

jQuery([ ]), "String", true, false (Default: false)

Overview

Text/HTML which will appear inside the button element (i.e. close button or link) located by default at the top right of the tooltip or titlebar (if enabled). The button will close the tooltip when clicked.

If it is set to true the default styled icon will be used. If a jQuery element is provided it will be used as the button and appended to the tooltip, or titlebar element (if enabled). Finally, if a string is provided it will be used as the buttons innerText and title/aria-title attributes.

Examples

Create another "About me" tooltip which opens on click and only hides when the title button is clicked

$('.selector').qtip({
	content: {
		text: 'Quite Fancybox-y if you ask me...',
		button: true
	},
	hide: {
		event: false
	}
});

You can also have tooltips with a title, in which case the button will lye within it:

$('.selector').qtip({
	content: {
		text: 'I really like owls!',
		title: 'I have a button to my right!',
		button: 'Close'
	},
	hide: {
		event: false
	}
});

Notes

• Prior to qTip 2.1, this option was known as content.title.button, which is still supported but deprecated
• Button will be appended to the titlebar element if content.title is set, otherwise to the tooltip element.
• If no valid content is provided, the button will not be created.

---

content.ajax

Overview

Deprecated as of qTip 2.1. Please use jQuery Deferred Objects as your content.text instead. A full explanation is available in the Content Guide.