qTip is a tooltip plugin for the jQuery framework

Share!

Introducing qTip.

qTip is an advanced tooltip plugin for the ever popular jQuery JavaScript framework.

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!

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 the download 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!

Share!

Leave a comment