Overview

Defines where in relation to the tooltip the speech bubble tip is applied. Check-out the positioning docs for a full set of corner strings.

$('.selector').qtip({
	content: {
		text: 'I have a nice little callout pointer... nifty huh?'
	},
	style: {
		tip: {
			corner: true
		}
	}
});

$('.selector').qtip({
	content: {
		text: 'I have a nice little callout pointer... nifty huh?'
	},
	style: {
		tip: {
			corner: 'left center'
		}
	}
});

Notes

• When set to true, the tip position will be inherited from the position.my property and adjusted automatically if viewport adjustment is enabled.
• The positioning values of 'center' and 'center center' are not valid positioning values in this plugin.

Overview

Used in conjunction with style.tip.corner, this option overrides what corner type is rendered. Specifying a corner string here will cause the tip to render as this corner type, regardless of its position in relation to the tooltip.

You can also specify a single corner property e.g. "left" or "center", which will cause the tip to inherit it's other properties from the corner string. This is primarily useful when using mimic with the position.viewport functionality.

$('.selector').qtip({
	content: {
		text: 'I look very similar to a ClueTip tooltip in terms of my callout pointer.'
	},
	style: {
		tip: {
			corner: 'right top',
			mimic: 'right center'
		}
	}
});

$('.selector').qtip({
	content: {
		text: 'My tip will mimic the center style regardless of position or viewport adjustment!'
	},
	position: {
		viewport: $(window) // Adjust position to keep within the window
	},
	style: {
		tip: {
			corner: 'right top',
			mimic: 'center' // Single 'center' value here
		}
	}
});

Notes

• This option overrides the presentation of the tip only. It does not effect the tips position!

Overview

This option determines the width of the border that surrounds the tip element, much like the CSS border-width property of regular elements. If a boolean true is passed, the border width will be detected automatically based on the border-width of the side the tip falls on. See the styling section for more information on this.

$('.selector').qtip({
	content: {
		text: 'I look very similar to a Google Maps tooltip!'
	},
	style: {
		classes: 'ui-tooltip-light',
		tip: {
			corner: 'bottom center',
			mimic: 'bottom left',
			border: 1,
			width: 88,
			height: 66
		}
	}
});

Notes

• Unlike qTip1 the tip border follows the normal CSS property and applies the border outside the element, not inside.
• See the styling section for more information on border-width detection

Overview

Determines the width of the rendered tip in pixels, in relation to the side of the tooltip it lies upon i.e. when the tip position is on the left or right, this quantity actually refers to the tips height in visual terms, and vice versa.

$('.selector').qtip({
	content: {
		text: 'My callout pointer looks a bit wackier than usual'
	},
	style: {
		tip: {
			corner: true,
			width: 24
		}
	}
});

Notes

• Make sure this is a number only, don't include any units e.g. 'px'!
• Prior to the 26th April 2012 nightly, this was an absolute value i.e. it determined the width of the tooltip along the x axis. This was changed and you should update your code if you relied on this fact.

Overview

Determines the height of the rendered tip in pixels, in relation to the side of the tooltip it lies upon i.e. when the tip position is on the left or right, this quantity actually refers to the tips width in visual terms, and vice versa.

$('.selector').qtip({
	content: {
		text: 'My callout pointer looks a bit wackier than usual'
	},
	style: {
		tip: {
			corner: true,
			height: 24
		}
	}
});

Notes

• Make sure this is a number only, don't include any units e.g. 'px'!
• Prior to the 26th April 2012 nightly, this was an absolute value i.e. it determined the height of the tooltip along the y axis. This was changed and you should update your code if you relied on this fact.