jQuery Plugin – Generate customizable tooltips with qTip2

jQuery is the popular Open source JavaScript library that makes JavaScript development easy. The core functionality of the jQuery can be extended by using various plugins. Like jQuery, its plugins are also Open source and free to use. Various jQuery plugins can be used to add new features to the core jQuery library.

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.

Downloading qTip2

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.

Installing qTip2

The installation is as simple as adding the qTip2 JavaScript and qTip2 CSS files to the HTML.

<html>

<head>

<title>Refulz</title>

<!—qTip2 css file -->

<link type="text/css" rel="stylesheet" href="/CSSPath/jquery.qtip-2.0.0.css" />

</head>

<body>

<!—Page Content Here -->

<script type="text/javascript" src="/JSPath/jquery.1.7.2.min.js"></script>

<script type="text/javascript" src="/JSPath/jquery.qtip-2.0.0.min.js"></script>

</body>

</html>

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.

$('.selector').qtip({

content: 'My first tooltip

});

A slightly advanced example shows more options to control the position and behaviour of the tooltip.

$('.selector').qtip({

content: My second tooltip',

position: {

my: 'top left',

at: 'bottom right'

},

show: 'click',

hide: 'click',

style: {

tip: true,

classes: 'ui-tooltip-red'

}

}); 

The my and 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.

2 Responses to “jQuery Plugin – Generate customizable tooltips with qTip2”

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>