qtip – jquery tooltip plugin

I was looking for a tooltip functionality (extension on jquery).I came across this fantastic jquery extnesion qtip.Very simple and easy to implement and supports IE6+,FF2+Opera 2+, Safari 3+,Chrome 1+

Steps to Implement
1. Include jquery file jquery.1.3.2.min.js – for minified version
2. Include qtip javascript file jquery.qtip-1.0.0.min.js – download from qtip downloads
3. Script on document.ready to call instantiate qtip on load
4. Normal HTML with title attribute set

5.Styling of tooltip is controlled in step 3

Applying tooltip for anchor tag

$().ready(function() {
$('a[title]').qtip({ style: { name: 'dark', tip: true } })
});

For rounded corners , just add border attribute to style attribute example below

style: {
border: {
width: 7,
radius: 5,
color: '#A2D959'
},
},

For more information, please visit
Demo of qtip
Documentation of qtip

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s