qTip2 is one such plugin that can be used to add customizable tooltips to the webpages. The MIT/GPLv2 licenses mean that qTip2 is completely free. The qTip2 works best with jQuery 1.4.4+. It has support for all major browsers like Chrome 8+, IE 6+, Firefox 3+, Opera 9+ and Safari 2+.
Features of qTip2
Built on the top of version 1.0, the qTip2 has many new features including the speech bubble tips and image-map support.
With this plugin, the tooltip can be displayed in any required position and can follow any DOM element.
Tooltips can be styled with options like shadows and rounded corners. The tooltips can also be displayed as modal windows.
qTip2 has Ajax support for loading remote data.
Many features are highlighted through creative demos at the qTip2 website.
The qTip2 can be downloaded from the official website. It gives you an option to customize the download by choosing the features that you want to implement on your website. You have the option to choose the styles and plugins.
qTip2 repository is actively maintained over the GitHub repository. The latest updates and bug fixes can be found at the code repository.
<!—qTip2 css file –>
<link type="text/css" rel="stylesheet" href="/CSSPath/jquery.qtip-2.0.0.css" />
<!—Page Content Here –>
The minified versions are recommended for the production environment.
Creating Tooltips with qTip2
A basic example of the qTip2 will apply a tooltip on the selector with CSS class .selector. The value of the
content property will show as the content of the tooltip.
content: ‘My first tooltip
A slightly advanced example shows more options to control the position and behaviour of the tooltip.
content: My second tooltip’,
my: ‘top left’,
at: ‘bottom right’
at properties define the position of the tooltip. Additional styles can be defined in the
style attribute array. The code snippet also defines the event to show and hide the tooltip.
Advanced options and properties can be found at the demos page of the official website.