Getting Started
Requirements
Before downloading and installing qTip2, you'll need to make sure you have the jQuery JavaScript Library (1.4.1 or higher!) installed. I recommend using 1.4.4 and above because of mountain of speed improvements!
8+ 
3+ 
6+ 
9+ 
2+, iOS 4+ Upgrading from 1.0
If you're using the old 1.0RC3 and wish to upgrade, make sure to check-out the converter to transform your code in preparation for the upgrade. It will supply you with the new configuration code as well as any additional code or CSS styles that you'll need.
Downloading
To download the latest version of qTip2, visit our download page and choose the features you'd like to implement on your site. There are several options here, including speech bubble tips and several other addons, and also minifed and packed versions for production sites.
For production environments I recommend you use the minified or packed versions of the library files. For development the non-minified version is best to allow easy debugging.
Installation
Now you have the jQuery library and qTip2 files, it's time to include them within your HTML.
I highly recommend that all JavaScript includes be placed just before the end </body> tag as this ensures the DOM is loaded before manipulation of it occurs. This is not a requirement, simply an insiders tip!
<html> <head> <title>My site</title> <!-- css file --> <link type="text/css" rel="stylesheet" href="/path/to/jquery.qtip-2.0.0.css" /> </head> <body> <!-- content here --> <script type="text/javascript" src="/path/to/jquery.1.4.2.min.js"></script> <script type="text/javascript" src="/path/to/jquery.qtip-2.0.0.min.js"></script> </body> </html>
NB Notice the jQuery library is included before qTip2. This is absolutely essential for correct functioning of the plugin!
Create a qTip
Replacing the regular old title tooltips of your browser is simple. Just call the qtip() method on all link elements with no content option (it will use the title attribute of the target by default).
$('a[title]').qtip()
You can also define an alternative attribute which the tooltip will grab its content from, for example the alt attribute used for images:
$('.selector').qtip({ content: { attr: 'alt' } })
The code above must ofcourse be encapsulated in a <script> /> tag, as it's simply… well JavaScript!
This code must go below the <script> tag which includes the qTip2 file! Whether that be in your <head> section or just before the end </body> tag.
You can obviously customize the other options as much as you like, which are documented in detail in the options reference. Also make sure to check-out the Tutorials section for detailed instructions on how to create more complex qTips.
Frequently asked questions
Why have rounded corners been removed in qTip2?
qTip 1.0 releases allowed you to apply cross-browser border-radius to your tooltips, however this came at the price of performance, especially in IE. In order to make this feature work reliably, several IE specific hacks had to be used which increased the library codebase significantly (almost 10kb!).
qTip2 has been re-factored significantly to provide not only a smaller code base, but a faster, more modular operation. Because of this, I made the decision to remove the rounded corners feature from the library in favour of the standard CSS border-radius property. This also falls in line with the move from style objects to standard CSS stylesheets (see below).
Why do I require a stylesheet to use qTip2?
In the qTip 1.0 releases you defined your styles using the styles object. However, this not only unnecessarily increases the complexity of the library, but flies against the concept of separating content from visual information. Therefore qTip2 utilises a separate stylesheet to contain all tooltip styles, which allows you to easily add new styles without additional JavaScript code, as well as easily editing pre-existing styles.
Do you offer paid support for qTip?
I don't offer any paid support packages, but if you're in need of quite a detailed qTip setup I'm glad to accept paid work to setup it up for you. Just drop me a line and we can talk business!
What do donations go towards?
Donations are used to keep the hosting company happy with regular payments and help to keep me on my feet through University while I develop this much loved library! So donations are always welcome and if you really enjoy using qTip2, please consider it. You know you want to deep down! For more information on donations checkout the donations page.
Are you SURE it's free?
Absolutely! qTip is free and will always be free, unless of course I become homeless and have to live out of a box... then we'll see. But until then, don't worry too much! qTip is dual licensed under the MIT/GPL licenses. Check out the licensing page for more details on qTip's licensing model.
By "you must include the license files" you mean...?
…you must distribute the qTip files along with the agreed licenses (MIT and GPL), be it a simple link to the license or even a small comment within the file!
Do you still support qTip 1.0 releases?
qTip 1.0 releases are now discontinued but I will continue to support people having issues with the script. If you need support check-out the qTip support forum. I recommend everyone using it upgrades to qTip2 as this is where all active development will be!
