global.md

qTip² - Global properties

This section covers qTips global options, which effect every qTip created on the page, both past and future.

$.fn.qtip.version

Stores the version of qTip² library included on the page in the format "2.x.x".

$.fn.qtip.defaults

Holds all the default qTip² values inherited by your .qtip() calls.

$.fn.qtip.defaults = {
	prerender: false,
	id: false,
	overwrite: true,
	suppress: true,
	content: {
		text: true,
		attr: 'title',
		title: {
			text: false,
			button: false
		}
	},
	position: {
		my: 'top left',
		at: 'bottom right',
		target: false,
		container: false,
		viewport: false,
		adjust: {
			x: 0, y: 0,
			mouse: true,
			resize: true,
			method: 'flip flip'
		},
		effect: function(api, pos, viewport) {
			$(this).animate(pos, {
				duration: 200,
				queue: false
			});
		}
	},
	show: {
		target: false,
		event: 'mouseenter',
		effect: true,
		delay: 90,
		solo: false,
		ready: false,
		modal: {
			on: false,
			effect: true,
			blur: true,
			escape: true
		}
	},
	hide: {
		target: false,
		event: 'mouseleave',
		effect: true,
		delay: 0,
		fixed: false,
		inactive: false,
		leave: 'window',
		distance: false
	},
	style: {
		classes: '',
		widget: false,
		width: false,
		height: false,
		tip: {
			corner: true,
			mimic: false,
			width: 8,
			height: 8,
			border: true,
			offset: 0
		}
	},
	events: {
		render: null,
		move: null,
		show: null,
		hide: null,
		toggle: null,
		visible: null,
		focus: null,
		blur: null
	}
};

Notes

• Take a look at the Override defaults tutorial for details on how to edit this object properly.

$.fn.qtip.nextid

Overview

Determines the base numeric identifier assigned to future qTips. At document load this is set to zero, and is incremented for each successive qTip created. This identifier is used to retrieve qTips by their corresponding 'id' attr in the form of "ui-tooltip-<i>"

Examples

We can start our qTip ID at a higher number, such as 100:

// Set the nextid global option
$.fn.qtip.nextid = 100;

/*
 * This qTip will have an ID of "ui-tooltip-100"
 * All qTips created after will have ID values greater than 100
 */
$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	}
});

See also

• id option

Notes

• This MUST be an integer only! If you want to assign a string as an identifier, check-out the individual id option.

$.fn.qtip.inactiveEvents

Value

["click", "dblclick", "mousedown", "mouseup", "mousemove", "mouseleave", "mouseenter"]

Overview

An array of events which, when triggered on the qTip, cause it to become "active" i.e. no longer inactive, and reset the inactive timer assigned to it (if any) by the defined inactive option.

Examples

Let's create a tooltip which hides when it becomes inactive for 3 seconds, inactive in this case meaning when it isn't clicked.

// Set tooltips to only become active when clicked
$.fn.qtip.inactiveEvents = ["click"];

// Create a tooltip that will hide after 3 seconds if it isn't clicked
$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	},
	hide: {
		inactive: 3000
	}
});

See also

• hide.inactive

Notes

• This effects all qTips on the page, included those already created (but only if you happen to update a setting which cause the event handlers to be rebound).

$.fn.qtip.zindex

Values

Integer (Default: 15000)

Overview

Determines the base z-index of all qTips on the page of which no qTip z-index will drop below.

Examples

If you're using another plugin that happens to use a higher z-index than the qTip default, increase it a little:

// Now your qTip's appear above the other plugin elements, yipeee!
$.fn.qtip.zindex = 20000;

See also

• modal.zindex

Notes

• Updating this option after you've already created some tooltips can have some pretty weird after-effects. Try to avoid it!