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 »

Show

– #
[ jQuery Array ], false

target:false

Overview

Defines the HTML element(s) which will trigger your specified show.event(s). When set to false, the element the .qtip() method was called upon is used.

Examples

This example will cause the first H1 element to show the tooltip when the show.event is triggered (in this case mouseenter): 
$('.selector').qtip({
	content: {
		text: 'You moused over the first H1 element on the document.'
	},
	show: {
		target: $('h1:first')
	}
});
We can also cause the tooltip to open if multiple elements are moused over e.g. all header elements: 
$('.selector').qtip({
	content: {
		text: 'You moused over a header element'
	},
	show: {
		target: $('h1, h2, h3, h4')
	}
});

See also

show.event

Notes

  • Setting a different show target does not effect the positioning, which is controlled via the position.target option.
– #
"String", false

event:"mouseenter"

Overview

Event(s) which will trigger the tooltip to be shown. All possible values are documented under jQuery's Event bind() documentation. Multiple, space separated events are supported.

Examples

The below example will cause the tooltip to be shown when the target element is clicked: 
$('.selector').qtip({
	content: {
		text: 'I get shown on click'
	},
	show: {
		event: 'click'
	}
});
You can also specify multiple events using a space separated string. This example will make your tooltips appear when the show.target is clicked or a mouseover occurs: 
$('.selector').qtip({
	content: {
		text: 'I get shown on click'
	},
	show: {
		event: 'click mouseenter'
	}
});

See also

show.target

Notes

  • mouseenter is the non-bubbling version of mouseover, and is the preferred event to use.
– #
Integer

delay:140

Overview

Time in milliseconds by which to delay showing of the tooltip when the show.event is triggered on the show.target

Examples

This tooltip will only show after hovering the show.target for 1000ms (1 second): 
$('.selector').qtip({
	content: {
		text: 'I have a longer delay then default qTips'
	},
	show: {
		delay: 1000
	}
});

See also

show.target

Notes

  • This works much like the hoverIntent plugin by Brian Cherne.
  • This property can cause problems on iOS devices such as the iPad and iPhone. See here for a full discussion.
– #
jQuery(), true, false

solo:false

Overview

Determines whether or not the tooltip will hide all others when the show.event is triggered on the show.target. If a jQuery object is used as its value, only tooltips found within that object will be hidden.

Examples

Let's create a simple tooltip that hides all others when shown 
$('.selector').qtip({
	content: {
		text: 'You won\' see me with any other tooltips... I\'m too cool for that!'
	},
	show: {
		solo: true
	}
});
Or if for some reason we want to hide only a sub-set of the tooltips, we can define a parent common to them 
$('.selector').qtip({
	content: {
		text: 'I hide other tooltips when I\'m shown... booya!'
	},
	show: {
		solo: $('.qtips') // Hide tooltips within the .qtips element when shown
	}
});

See also

show.target

Notes

  • In RC3 it was possible to specify which tooltips which should be hidden. This feature is slightly different in 2.0, allowing to specify only a common parent to those tooltips instead.
– #
true, false

ready:false

Overview

Determines whether or not the tooltip is shown once the document is loaded e.g. when the document.ready() event is triggered.

Examples

Create a tooltip that's shown on document load. This could be handy for things like step-by-step tutorials. 
$('.selector').qtip({
	content: {
		text: 'I\'m visible on page load'
	},
	show: {
		ready: true
	}
});

See also

content.prerender document.ready()

Notes

  • This option obeys your show.delay setting, so set it to zero if you want it to show instantly on page load!
  • Enabling this option on multiple tooltips can slow down your page load times.
– #
Function, true, false

effect:true

Overview

Determines the type of effect that takes place when showing the tooltip. A custom method can also be used whose scope is the tooltip element when called. If set to false, no animation takes place.

Examples

Let's create a tooltip that slides down when shown using a custom animation callback: 
$('.selector').qtip({
	content: {
		text: 'I slide in when shown, none of this fading business for me!'
	},
	show: {
		effect: function(offset) {
			$(this).slideDown(100); // "this" refers to the tooltip
		}
	}
});

See also

hide.effect

Notes

  • By default a fadeIn animation takes place with a duration of 90ms.
– #
Object

modal:Object

Overview

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