qTip

Requirements

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.

Downloading qTip

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 thedownload page as mentioned above.

Installation

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:

<script type="text/javascript" src="/projects/qtip/js/jquery.1.3.2.min.js"></script>
<script type="text/javascript" src="/projects/qtip/js/jquery.qtip-1.0.0.min.js"></script>

Notice the jQuery library is included before qTip. This is absolutely essential for correct functioning of the library and its accompanying methods.

 

It is highly recommended that all JavaScript includes like the one above be placed after all your content at the footer of the page, just before the end </body> tag. This ensures that all content is loaded before manipulation of the DOM occurs.

HTML structure

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!

Creating a tooltip

Creating a tooltip with qTip is very simple. Build a list of elements you want to apply a tooltip to, using jQuery's selectors like so:

$('ul:last li.active')

The above code for example will generate an array of all li elements with class "active", which are children of the last ul element on the page. Once you've got your element array, you simply call the qtip() method on it, along with an option object to specify the tooltips traits, like this:

$('ul:last li.active').qtip({
   content: 'This is an active list element',
   show: 'mouseover',
   hide: 'mouseout'
})

This will create tooltips containing content which will appear when any of the list items are moused over, and hides when the mouse is no longer over the element.

And that's it! Check-out the Tutorials for detailed summaries of how to create more complex tooltips.

Replacing title tooltips

Replacing the regular old title tooltips of your document is a peice of cake. Simply call the qtip() method with no content option and it uses the title attribute of the target element by default! Like so:

$('a[title]').qtip({ style: { name: 'cream', tip: true } })

This will replace all the regular browser tooltips with swishy new qTip tooltips. Obviously you can customize the options array as much as you like, just make sure to exclude the content attribute or set it to false!