This is a message.

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.

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.



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


Read the full documentation for this example.


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.