Global

Global options settings which influence all tooltips on the page

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, // Render tooltip HTML on $(document).ready()
	id: false, // Incremental numerical ID used by default
	overwrite: true, // Overwrite previous tooltips on this element
	suppress: true, // Translate 'title' to 'oldtitle' attribute (prevent browser tooltip)
	content: {
		text: true,
		attr: 'title',
		text: false,
		button: false
	},
	position: {
		my: 'top left',
		at: 'bottom right',
		target: false, // Defaults to target element
		container: false, // Defaults to $(document.body)
		viewport: false, // Requires Viewport plugin
		adjust: {
			x: 0, y: 0, // Minor x/y adjustments
			mouse: true, // Follow mouse when using target:'mouse'
			resize: true, // Reposition on resize by default
			method: 'flip flip' // Requires Viewport plugin
		},
		effect: function(api, pos, viewport) {
			$(this).animate(pos, {
				duration: 200,
				queue: false
			});
		}
	},
	show: {
		target: false, // Defaults to target element
		event: 'mouseenter', // Show on mouse over by default
		effect: true, // Use default 90ms fade effect
		delay: 90, // 90ms delay before showing
		solo: false, // Do not hide others when showing
		ready: false, // Do not show immediately
		modal: { // Requires Modal plugin
			on: false, // No modal backdrop by default
			effect: true, // Mimic show effect on backdrop
			blur: true, // Hide tooltip by clicking backdrop
			escape: true // Hide tooltip when Esc pressed
		}
	},
	hide: {
		target: false, // Defaults to target element
		event: 'mouseleave', // Hide on mouse out by default
		effect: true, // Use default 90ms fade effect
		delay: 0, // No hide delay by default
		fixed: false, // Non-hoverable by default
		inactive: false, // Do not hide when inactive
		leave: 'window', // Hide when we leave the window
		distance: false // Don't hide after a set distance
	},
	style: {
		classes: '', // No additional classes added to .qtip element
		widget: false, // Not a jQuery UI widget
		width: false, // No set width
		height: false, // No set height
		tip: { // Requires Tips plugin
			corner: true, // Use position.my by default
			mimic: false, // Don't mimic a particular corner
			width: 8, 
			height: 8,
			border: true, // Detect border from tooltip style
			offset: 0 // Do not apply an offset from corner
		}
	},
	events: {
		render: null, // Called when tooltip rendered
		move: null, // Called when tooltip repositioned
		show: null, // Called when tooltip is about to be shown
		hide: null, // Called when tooltip is about to be hidden
		toggle: null, // Shortcut to binding to two events above
		visible: null, // Called when tooltip is shown
		hidden: null, // Called when tooltip is hidden
		focus: null, // Called when tooltip gains focus
		blur: null // Called when tooltip loses focus
	}
};

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 "qtip-<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 "qtip-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!