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 »

Position

Basics

qTip utilises a special positioning system using corners. The basic concept behind it is pretty simple, in fact it turns out to be plain English when read aloud! For example, let's say we want to position my tooltips top left corner at the bottom right of my target. Simple enough... let's see the code involved in this: 

$('.selector').qtip({
	content: 'I\'m positioned using corner values!',
	position: {
		my: 'top left',  // Position my top left...
		at: 'bottom right', // at the bottom right of...
		target: $('.selector') // my target
	}
});
 

Notice how reading down the object you begin to see a logical plain English pattern emerge. Much easier than using x and y coordinates! Here's a diagram of all valid corner values for use with position.my and position.at options as well as the tips plugin corner and mimic options.

NB This system is heavily based upon the jQuery UI Position plugin.

Back to the top
– #
jQuery([ ]), [x, y], "mouse", "event", false

target:false

Overview

HTML element the tooltip will be positioned in relation to. Can also be set to 'mouse' or the 'event' (position at target that triggered the tooltip), or an array containing an absolute x/y position on the page.
If you also have position.adjust.mouse set to true, the qTip will follow the mouse until a hide event is triggered on the hide target

Examples

Let's position our tooltip in relation to the last LI element of the first UL element in our document: 
$('.selector').qtip({
	content: {
		text: 'I\'m positioned in relation to a different element'
	},
	position: {
		target: $('ul:first li:last')
	}
});
We can also position the tooltip in relation to the mouse, so that the tooltip is given the x/y coordinates of the mouse on show 
$('.selector').qtip({
	content: {
		text: 'I\'m positioned in relation to the mouse'
	},
	position: {
		target: 'mouse'
	}
});
It's also possible to position the same tooltip in relation to multiple targets using several hide/show targets. This is handy for situations where you need to use similar tooltips for several elements on the page. 
$('.selector').qtip({
	content: {
		text: 'I position to whatever show target triggered me.'
	},
	position: {
		target: 'event'
	},
	show: {
		target: $('.selector, .selectorTwo')
	},
	hide: {
		target: $('.selector, .selectorTwo')
	}
});
And last but not least, absolute positioning via an x/y array e.g. a tooltip at 10px from left and top of the page: 
$('.selector').qtip({
	content: {
		text: 'I\'m absolutely positioned, but still work with the viewport property!'
	},
	position: {
		target: [10, 10]
	}
});

See also

position.viewport

Notes

  • Setting this to false causes the tooltip is positioned in relation to the element .qtip() was called upon.
  • When using absolute positioning ([x, y]) is used, position.viewport still works!
– #
"Corner", false

my:"top left"

Overview

The corner of the tooltip to position in relation to the position.at. See the Basics section for all possible corner values.

Examples

Let's create a tooltip that's positioned to the left center of our target: 
$('.selector').qtip({
	content: {
		text: 'My center left corner is positioned next to my target'
	},
	position: {
		my: 'left center'
	}
});

See also

position.at position.target

Notes

– #
"Corner", false

at:"bottom right"

Overview

The corner of the position.target element to position the tooltips corner at. See the Basics section for all possible corner values.

Examples

Let's create a tooltip thats positioned to the top left of our target: 
$('.selector').qtip({
	content: {
		text: 'I\'m positioned as the top left of my target'
	},
	position: {
		at: 'top left'
	}
});

See also

position.my position.target

Notes

– #
jQuery([ ]), false

container:document.body

Overview

Determines the HTML element which the tooltip is appended to e.g. it's containing element.

Examples

Let's append our tooltip to a custom 'tooltips' container: 
$('.selector').qtip({
	content: {
		text: 'I\'m appended within a custom tooltips DIV'
	},
	position: {
		container: $('div.tooltips')
	}
});

Notes

  • If the containing element has overflow set to anything other than "visible" this will confine the qTip's visibility to the containers boundaries.
– #
jQuery([ ]), true, false

viewport:false

Overview

Determines the viewport used to keep the tooltip visible i.e. the element whose boundaries the tooltip must stay visible within at all times if possible. If true it's value will be inherited from the position.container property.

Examples

Make a tooltip that will attempt to stay within the window viewport, adjusting the positioning corners as needed: 
$('.selector').qtip({
	content: {
		text: 'If I go off-screen, my positioning corners will adjust. Resize your browser window to see!'
	},
	position: {
		viewport: $(window)
	}
});

Notes

  • Your position.corner options will be temporarily adjusted when using this functionality.
– #
Function, false

effect:function slide(){}

Overview

Determines the type of effect that takes place when animating a tooltips position. A custom method can also be used, which is passed the new position as one of its parameters, and whose scope is the tooltip element.

Examples

Let's create a tooltip that slides into its position on screen with linear easing 
$('.selector').qtip({
	content: {
		text: 'When my position is updated I slide into place. Nifty huh?'
	},
	position: {
		effect: function(api, pos, viewport) {
			// "this" refers to the tooltip
			$(this).animate(pos, {
				duration: 600,
				easing: 'linear',
				queue: false // Set this to false so it doesn't interfere with the show/hide animations
			});
		}
	}
});
We can also disable the default slide animation by passing false: 
$('.selector').qtip({
	content: {
		text: 'I don\'t slide like the rest of them...'
	},
	position: {
		effect: false
	}
});
The default animation callback is: 
function(api, pos, viewport) { $(this).animate(pos, { duration: 200, queue: FALSE }); }

Notes

  • By default a custom, slide animation takes place using the custom function listed above.
  • The use of the animation "queue" option eliminates the problem of hiding/showing tips whilst repositioning. This could have other side-effects, so enable if you run into problems
– #
Integer

adjust.x:0

Overview

A positive or negative pixel value by which to offset the tooltip in the horizontal plane e.g. the x-axis. Negative values cause a reduction in the value e.g. moves tooltip to the left.

Examples

Let's fine tune our tooltips position by offsetting it 10 pixels to the right: 
$('.selector').qtip({
	content: {
		text: 'My position is adjusted by 10px on the horizontal'
	},
	position: {
		adjust: {
			x: 10
		}
	}
});

See also

position.adjust.y

Notes

  • Currently this option only supports pixel values. All other unit values are ignored
– #
Integer

adjust.y:0

Overview

A positive or negative pixel value by which to offset the tooltip in the vertical plane e.g. the y-axis. Negative values cause a reduction in the value e.g. moves tooltip upwards.

Examples

Let's fine tune our tooltips position by offsetting it 12 pixels upwards: 
$('.selector').qtip({
	content: {
		text: 'My position is adjusted by -12px on the vertical'
	},
	position: {
		adjust: {
			y: -12
		}
	}
});

See also

position.adjust.x

Notes

  • Currently this option only supports pixel values. All other unit values are ignored
– #
"<flip|flipinvert|shift|none> <flip|flipinvert|shift|none>"

adjust.method:"flip"

Overview

This option determines the kind of viewport positioning that takes place.

The default "flip" type basically flips the tooltip when it goes off-screen i.e. from top-right, to bottom-right etc. The "flipinvert" type works the same way, except when the flip happens it inverts the adjust.x and adjust.y properties. The "shift" type attempts to keep the tooltip on screen by adjusting only by the amount needed to keep it within the viewport boundaries.

You can specify the behaviour of each axis (i.e. horizontal and vertical) separately, for example a value of "flip none" will cause the tooltip to flip across the horizontal axis when it extends out the viewport, but do nothing when it extends out the viewport vertically. There are a number of combinations.

Examples

Instead of the default flip repositioning, let's use the shift repositioning, but only shift it horizontally 
$('.selector').qtip({
	content: {
		text: 'My position is adjusted just enough to keep me within the viewport, but only along the x axis (horizontally)'
	},
	position: {
		adjust: {
			method: 'shift none'
		}
	}
});

See also

position.viewport

Notes

  • Supplying a single string such as "flip", "flipinvert" or "shift" will cause qTip to use that method for both axis'
  • This system is very similar to that used in the jQuery UI Position plugin.
  • Both flip and shift methods also adjusts the tip position, if enabled
– #
true, false

adjust.mouse:true

Overview

When the position.target is set to mouse, this option determines whether the tooltip follows the mouse when hovering over the show.target.

Examples

Let's make a tooltip which follows our mouse when visible 
$('.selector').qtip({
	content: {
		text: 'I follow the mouse whilst I\'m visible. Weeeeee!'
	},
	position: {
		target: 'mouse',
		adjust: {
			mouse: true  // Can be omitted (e.g. default behaviour)
		}
	}
});
Alternatively, we can set it to false and make the tooltip assume the position of the mouse when shown, but not follow it, similar to how a right-click or "context" menu is positioned. 
$('.selector').qtip({
	content: {
		text: 'I\'m positioned under the mouse when first visible, but I stay here... very boring!'
	},
	position: {
		target: 'mouse',
		adjust: {
			mouse: false
		}
	}
});

See also

position.target

Notes

– #
true, false

adjust.resize:true

Overview

Determines if the tooltips position is adjusted when the window is resized.

Examples

Set this option to true to adjust the tooltips position when the window is resized: 
$('.selector').qtip({
	content: {
		text: 'If you resize your window while I\'m visible, I\'ll adjust my position accordingly.'
	},
	position: {
		adjust: {
			target: $(document),
			resize: true // Can be ommited (e.g. default behaviour)
		}
	}
});
Alternatively, set it to false to prevent its position being updated: 
$('.selector').qtip({
	content: {
		text: 'Sadly... I don\'t respond to window resize :('
	},
	position: {
		target: $(document),
		adjust: {
			resize: false
		}
	}
});

See also

position.target

Notes

  • Only takes effect when position.target is the window or document element.
Back to the top