Dynamic positioning of the jquery tooltip object

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.

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.

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.

<script type=”text/javascript”>

jQuery(function() {

$(“.tooltip_anchor”).tooltip ({

offset : [10,2],
effect : ‘slide’,
predelay: ’10’
// 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.

Be the first to comment

Leave a Reply

Your email address will not be published.