-
Notifications
You must be signed in to change notification settings - Fork 470
Tips
The speech bubble tips plugin allows you to add nifty callout pointers to your tooltips. A wide range of options are available to style the tips, including height and width, colour and orientation/position on the tooltip. They even adjust with your tooltip when viewport adjustment is enabled!
When the tip plugin is in use on a tooltip, a new element becomes available within the API elements object, which references the newly created tip:
$('.selector').qtip({
content: {
text: 'Tips plugin element'
},
events: {
render: function(event, api) {
// Grab the tip element
var elem = api.elements.tip;
}
}
})Styling the tip's background and border colours is done via CSS, not the options below. These are detected from the styles set on the qtip-tip element listed above. If no valid style can be found for the background or border colour properties, qTip will look for styles on specific elements, depending on what it's looking for:
- qtip-tip element
- qtip-titlebar element - If present and tip overlaps
- qtip-content element
- qtip-tip element
- qtip-titlebar element - If present and tip overlaps
- qtip-content element
- qtip element
If no valid style can be found on any of these elements, the initially detected style of the qtip-tip element will be used. A notable exception to the inheritance is the border property, which can be used to override the detected CSS border-width.
Since, by default, most browsers default to using pure black (rgb(0,0,0), #000 etc.) as the default colour, if qTip2 detects this it will look elsewhere for the styles as listed above. If you need to use pure black, the best work around is to use something very close to it visually, such as rgb(0,0,1) or #000001.
true, "Corner", false (Default: true)
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.
Let's create a regular qTip with a tip whose corner is inherited from the position.my option:
$('.selector').qtip({
content: {
text: 'I have a nice little callout pointer... nifty huh?'
},
style: {
tip: {
corner: true
}
}
});We can also manually specify a different corner like so (if viewport adjustment is enabled, the tip position will not be adjusted):
$('.selector').qtip({
content: {
text: 'I have a nice little callout pointer... nifty huh?'
},
style: {
tip: {
corner: 'left center'
}
}
});- 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.
"Corner", false (Default: false)
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 its other properties from the corner string. This is primarily useful when using mimic with the position.viewport functionality.
Let's create a qTip with a similar tip style to ClueTip, whose tip arrow is equilateral and placed toward the top of the tooltip.
$('.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'
}
}
});As mentioned above, we can also use mimic with a single value too, to make for example the tip mimic 'center' and comply with viewport adjustment changes:
$('.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
}
}
});- This option overrides the presentation of the tip only. It does not effect the tips position!
true, Integer (Default: true)
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.
Let's create a qTip with a style to Google Maps tooltips, whose arrow blends with the border of the tooltip:
$('.selector').qtip({
content: {
text: 'I look very similar to a Google Maps tooltip!'
},
style: {
classes: 'qtip-light',
tip: {
corner: 'bottom center',
mimic: 'bottom left',
border: 1,
width: 88,
height: 66
}
}
});- 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
Integer (Default: 6)
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.
Let's make a tooltip with an elongated tip width
$('.selector').qtip({
content: {
text: 'My callout pointer looks a bit wackier than usual'
},
style: {
tip: {
corner: true,
width: 24
}
}
});- 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 tooltipin relation to the window. This was changed and you should update your code if you relied on this fact.
Integer (Default: 6)
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.
Let's make a tooltip with an elongated tip height
$('.selector').qtip({
content: {
text: 'My callout pointer looks a bit wackier than usual'
},
style: {
tip: {
corner: true,
height: 24
}
}
});- 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 tooltipin relation to the window. This was changed and you should update your code if you relied on this fact.
Integer (Default: 0)
Determines the offset of the tip in relation to its current corner position.
Say your tooltip is positioned at the bottom left of your target, but you want the tip shifted slightly to left instead of flush with the side of the tooltip:
$('.selector').qtip({
content: {
text: 'My callout pointer looks a bit wackier than usual'
},
style: {
tip: {
corner: true,
offset: 5 // Give it 5px offset from the side of the tooltip
}
}
});- This value is relative i.e. depending on which corner the tooltip is set it will behave differently.
- If your value is too large positioning problems can occur. Don't exceed a value equal to the height/width of the tooltip if possible.
- Negative values will only be applied to 'center' positioned tooltips e.g. top center, left center.