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 »

Content

– #
function(), jQuery([ ]), "String", true

text:true

Overview

Text/HTML which will appear inside the tooltip initially. If set to true the title attribute of the target will be used, if available. Can also specify an anonymous function that returns the content, and whose scope is the target element.

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: 
$('.selector').qtip({
	content: {
		text: function(api) {
			// Retrieve content from custom attribute of the $('.selector') elements.
			return $(this).attr('qtip-content');
		}
	}
});

See also

content.title.text

Notes

  • 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.
  • If no valid content can be detected in both this and the below content.attr option, no tooltip will be rendered.
– #
"String"

attr:'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.

See also

content.text

Notes

  • If no valid content is found within the elements attribute, and content.text is not defined, no tooltip will be rendered.
– #
function(), jQuery([ ]), "String", false

title.text:false

Overview

Text/HTML which will appear inside the title element of the content. If set to false, no title will be created. An anonymous function can also be used to return the title text, whose scope is the target element.

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: {
			text: 'About me'
		}
	}
});
We can also use another jQuery element as the tooltip title: 
$('.selector').qtip({
	content: {
		title: {
			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 return the title text: 
$('.selector').qtip({
	content: {
		text: 'Custom title text functions... hoorah!',
		title: {
			text: function(api) {
				// Retrieve content from ALT attribute of the $('.selector') element
				return $(this).attr('alt');
			}
		}
	}
});

See also

content.text

Notes

  • 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.
  • If no valid content is provided, the title will not be created.
– #
jQuery([ ]), "String", true

title.button:false

Overview

Text/HTML which will appear inside the title's button element (e.g. close link) located to the right of the title content. The button will close the tooltip when clicked.

Examples

Create another "About me" tooltip which opens on click and only hides when the title button is clicked 
$('.selector').qtip({
	content: {
		text: 'I really like owls!',
		title: {
			text: 'About me',
			button: 'Close'
		}
	},
	hide: {
		event: false
	}
});

You can also specify this as true, which creates a default pre-formatted button

Notes

  • Button only appears if a title is present e.g. title.text is defined and valid.
  • If no valid content is provided, the button will not be created.
– #
Object

ajax:Object

Overview

Defines the tooltip's AJAX content properties. See the plugin documentation for more information.