Dynamic positioning of the tooltip
Below you can see triggers whose tooltip is centered on the top edge of the trigger. Click here to scroll a little lower and see how the tooltips behave now. We are using dynamic plugin which repositions our tooltips so that it is always visible on the viewport.
If there is no room on the top edge then the tooltip is shown on the bottom edge. The same happens on every edge of the tooltip: top, bottom, left and right. When there is no room then the opposite edge is used. Note that this demo is only for vertical repositioning.
It is possible to change the style, effect and other configuration variables whenever the dynamic repositioning occurs. You can see that in the above example the "slide" effect goes downwards when it is displayed from the bottom edge and we are using a different background image where the arrow points upwards.
We are using the offset option to position the tooltip a little higher by default. When using the dynamic effect this value is inverted. Higher means lower and further right means further left.
The dynamic plugin can be used together with any effect. The above configuration uses the custom slide effect.
HTML coding
A minimal setup with the tooltip element and the triggers:
<!-- tooltip triggers -->
<div id="dyna">
<img src="image1.jpg" title="The tooltip text #1"/>
<img src="image2.jpg" title="The tooltip text #2"/>
<img src="image3.jpg" title="The tooltip text #3"/>
<img src="image4.jpg" title="The tooltip text #4"/>
</div>
CSS coding
When tooltip is repositioned it is assigned new CSS class names. By default we are using "top", "bottom", "left" and "right" to identify which edge is the newly positioned edge. These names can be changed from the plugin's configuration. Here are our settings for the repositioned bottom edge.
/* override the arrow image of the tooltip */
.tooltip.bottom {
background:url(/media/img/tooltip/black_arrow_bottom.png);
padding-top:40px;
height:55px;
}
.tooltip.bottom {
background:url(/media/img/tooltip/black_arrow_bottom.png);
}
JavaScript coding
After initializing the tooltip we will chain our dynamic() plugin. We have used the bottom parameter to alter the tooltip configuration for the bottom edge. Every configuration option can be used to alter the tooltip's behaviour.
// initialize tooltip
$("#dyna img[title]").tooltip({
// tweak the position
offset: [10, 2],
// use the "slide" effect
effect: 'slide'
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });
Note: the dynamic plugin and the slide effect are not included in the standard jQuery Tools distribution. You must download a custom combination to include those effects.
