jQuery Tooltip

Rich API

You can easily change the tooltip’s display position to any of the values below:

• ‘top’ – the tooltip is displayed above the html element when the mouse cursor is over the element.
• ‘bottom’ – the tooltip is displayed below the html element when the mouse cursor is over the element.
• ‘left’ – the tooltip is displayed on the left side of the html element when the mouse cursor is over the element.
• ‘right’ – the tooltip is displayed on the right side of the html element when the mouse cursor is over the element.
• ‘bottom-right’ – the tooltip is displayed in the bottom-right corner of the html element when the mouse cursor is over the element.
• ‘top-right’ – the tooltip is displayed in the top-right corner of the html element when the mouse cursor is over the element.
• ‘top-left’ – the tooltip is displayed in the top-left corner of the html element when the mouse cursor is over the element.
• ‘bottom-left’ – the tooltip is displayed in the bottom-left corner of the html element when the mouse cursor is over the element.
• ‘relative’ – the tooltip is displayed in a position that is relative to the html element’s position when the mouse cursor is over the element.
• ‘absolute’ – the tooltip is displayed in an absolute position when the mouse cursor is over the element.

The tooltip is shown and hidden with built-in animation effect. The widget’s API allows you to change the animation’s delay.

Cross-browser/cross-platform support

jQuery Tooltip supports all major desktop and mobile web browsers – Internet Explorer 7.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+, Google Chrome, IE Mobile, Android, Opera Mobile, Mobile Safari(IPhone, IPad).

Appearance and Styling

jQuery Tooltip ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property.