Dynamic positioning of the tooltip

Tooltips demo 7 / 7 : 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.

It is possible to change the style, effect and other configuration variables whenever the dynamic repositioning is made. 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:

<!-- the tooltip -->
<div class="dynatip">&nbsp;</div>

<!-- and the 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 */
#dynatip.bottom {
	background:url(/tools/img/tooltip/black_arrow_bottom.png);	
	padding-top:40px;
	height:55px;
}

#dynatip.bottom {
	background:url(/tools/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 behaviour.

$(document).ready(function() {

	// initialize tooltip
	$("#dyna img[title]").tooltip({
	
		// use single tooltip element for all tips
		tip: '#dynatip', 
		
		// tweak the position
		offset: [10, 2],
		
		// use "slide" effect
		effect: 'slide'
		
	// add dynamic plugin 
	}).dynamic( {
	
		// customized configuration on bottom edge
		bottom: {
		
			// slide downwards
			direction: 'down',
			
			// bounce back when closed
			bounce: true
		}
	});
	
});

Note: the dynamic plugin is not included in the standard jQuery Tools distribution. You must download a custom combination that includes this effect.