Built from the ground up to be user friendly, yet feature rich, qTip provides you with tonnes of features like rounded corners and speech bubble tips, and best of all… it’s completely free under the MIT license!
There are a few requirements you need to meet before you can utilise qTip as a tooltip renderer, the most obvious of which is the inclusion of the jQuery library. You can grab the latest version here
We recommend version 1.3 due to its significant speed increases in several areas, but qTip supports the use of jQuery version 1.2.6 and above for all you who have decided not to upgrade.
It is recommended you download the latest version of qTip to ensure you have the latest bug fixes and features available to date. You can do this by visiting our download page which features the latest library version under the “Latest version” section.
The library itself comes in two forms: the uncompressed documented source code, which is useful for development purposes, and also as a minified version, which is compressed and highly recommended for production environments. Both versions of the library are available on the download page as mentioned above.
Installing qTip is relatively straight forward. Simply include the both the jQuery and qTip library files e.g. jquery-qtip-1.0.0.min.js using script html element(s), like so:
Notice the jQuery library is included before qTip. This is absolutely essential for correct functioning of the library and its accompanying methods.
Once created, all tooltips have a common HTML structure in this form:
<div class="qtip qtip-stylename"> <div class="qtip-tip" rel="cornerValue"></div> <div class="qtip-wrapper"> <div class="qtip-borderTop"></div> // Only present when using rounded corners <div class="qtip-contentWrapper"> <div class="qtip-title"> // All CSS styles... <div class="qtip-button"></div> // ...are usually applied... </div> <div class="qtip-content"></div> // ...to these three elements! </div> <div class="qtip-borderBottom"></div> // Only present when using rounded corners </div> </div>
When styling a tooltip all extra CSS styles should be applied to the content and title elements unless your specifically styling other elements!