The Viewport plugin allows your qTip's to adjust their positioning to keep within a specified viewport i.e. a DOM element.

When the position.adjust.method is set to either "flip" or "flipinvert" on one or both directions an appropriate class is applied to the qTip which denotes its current Corner position. The following list details the corner values along with their associated class:

• top left - qtip-pos-tl
• top center - qtip-pos-tc
• top right - qtip-pos-tr
• bottom left - qtip-pos-bl
• bottom center - qtip-pos-bc
• bottom right - qtip-pos-br
• left top - qtip-pos-lt
• left center - qtip-pos-lc
• left bottom - qtip-pos-lb
• right top - qtip-pos-rt
• right center - qtip-pos-rc
• right bottom - qtip-pos-rb
• center center - qtip-pos-c

You can use this to easily adjust the styling of your qTip's based upon their viewport position, cool huh? For example:

.myStyle.qtip-pos-tl{
	color: red;
}

This will cause all qTips with a class (see style.classes) of myStyle to have red text when it's top left corner is pointing at the position.target.

jQuery([ ]), true, false (Default: false)

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.

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)
	}
});

• Your position.my/at options will be temporarily adjusted when using this functionality.
• If set to true this value will be inherited from the position.container property.

"{flip|flipinvert|shift|none} {flip|flipinvert|shift|none}" (Default: "flipinvert")

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.

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'
		}
	}
});

• 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.

• position.viewport