Dynamic tooltips

Click here to scroll a little lower and see how the tooltips behave. We are using the dynamic plugin to reposition our tooltips so that they are always visible in the viewport.

A must have tool for designing better layouts and more intuitive user-interfaces.

Tooltips can be positioned anywhere relative to the trigger element.

Tooltips can contain any HTML such as links, images, forms, tables, etc.

There are many built-in show/hide effects and you can also make your own.

standalone demo

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. The opposite edge is always used.

Features

Can be used with any effect
You can use a custom CSS class name for any repositioned edge. This allows you to style the tooltip differently for each edge.
You can change the effect and any other configuration variable dynamically whenever repositioning occurs.
The tooltip's offset configuration variable is inverted. Higher means lower and further right means further left.
Small file size: only about 2Kb of minified code. Incomparable.

Usage

Here is the JavaScript setup for the example above:

// 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 } });

JavaScript

Read the full documentation for this example.

Configuration

Here is a full list of available configuration options for this plugin:

property	default	description
classNames	`'top right bottom left'`	The CSS class names assigned for the tooltip when repositioning occurs. The names are given as a single string where names for different edges are separated with spaces. Note that you must follow the default pattern for designating different edges if you change the class names.
top		An object with alternate configuration options that will override the default settings when the tooltip is repositioned on the top edge. For example: `{offset: [40, -30], effect: 'toggle', opacity: 0.9}`.
right		Alternate configuration options for the right edge.
bottom		Alternate configuration options for the bottom edge.
left		Alternate configuration options for the left edge.