qTip 1.0 will soon be obsolete... check-out the qTip2 preview here!

Tutorials

Back to the topPositioning

So we've created your first tooltip using qTip's library, woohoo! But now we want to customize it a little more, give it a little p'zaz, and so on and so forth. First thing we really want to do is decide where the tooltip is going to appear in relation to its target. We do this by using the position.corner sub-option like so:

$("jqueryselector").qtip({
   content: 'I\'m at the top right of my target',
   position: {
      corner: {
         target: 'topRight',
         tooltip: 'bottomLeft'
      }
   }
});

Now the tooltip will be positioned with it's bottom left hand corner touching the targets top right hand corner. Very simple! There's 13 corner types available for positioning, all of which are demonstrated in the above image.

Back to the topStyling

Tooltips can begin to look pretty drab when they're all styled the same, don't you think? Lucky for you then, that qTip has some absolutely awesome styling features! qTip comes with 6 built-in styles that are ready to go, all you have to do is specify the style.name sub-option with your theme of choice, like this:

$("jqueryselector").qtip({
   content: 'Dark themes are all the rage!',
   style: { 
      name: 'dark' // Inherit from preset style
   }
});

Your probably wondering, "...but how do I create my own styles?". It's a good question, and thankfully it's just as easy to do! Simply declare the CSS properties within the style object (See here). Let's start by creating a tooltip with a custom style:

$("jqueryselector").qtip({
   content: 'Presets, presets and more presets. Let\'s spice it up a little with our own style!',
   style: { 
      width: 200,
      padding: 5,
      background: '#A2D959',
      color: 'black',
      textAlign: 'center',
      border: {
         width: 7,
         radius: 5,
         color: '#A2D959'
      },
      tip: 'bottomLeft',
      name: 'dark' // Inherit the rest of the attributes from the preset dark style
   }
});

Hover over me to see an example of what's produced from the code above. You can even specify a preset style to inherit from, just like the example above inherits from the dark style.

Now suppose you need to apply this style to many other tooltips, or even inherit from this custom style. What do you do? You create a new global style that is available to all tooltips on the page! This is achieved through the use of the qtip's style object. Let's recreate our style above as a global style:

$.fn.qtip.styles.mystyle = { // Last part is the name of the style
   width: 200,
   background: '#A2D959',
   color: 'black',
   textAlign: 'center',
   border: {
      width: 7,
      radius: 5,
      color: '#A2D959'
   },
   tip: 'bottomLeft',
   name: 'dark' // Inherit the rest of the attributes from the preset dark style
}

Now that we've created our new global style, let's apply it to our tooltip, exactly like the example above using the style.name sub-option:

$("jqueryselector").qtip({
   content: 'My style is inherited from a custom global style!',
   style: 'mystyle' // The name of the newly created custom style above
});

And there we have it. A new global style that be inherited from by other styles!

Back to the topBorders

qTip features a fully cross-browser rounded corner engine, so don't be so square! Let's dive in and create a tooltip that utilises this engine:

$("jqueryselector").qtip({
   content: 'I have rounded corners... I hear they\'re all the rage at the moment!',
   style: { 
      border: {
         width: 3,
         radius: 8,
         color: '#6699CC'
      },
      width: 200
}  });

Hover over me to see the result of the example code above. That's pretty much all there is to say about borders at this point! Experiment with combining the different options to achieve some stylish tooltips, like really big rounded corners, or slim line widths.

Back to the topTips

qTip is currently one of very few tooltip scripts for jQuery that supports cross-browser speech-bubble tips, so let's make the most of it! You can create some pretty cool effects, but first, let's start with a bog standard tip:

$("jqueryselector").qtip({
   content: 'Stems are great for indicating the context of the tooltip.',
   style: { 
      tip: 'bottomLeft' // Notice the corner value is identical to the previously mentioned positioning corners
   }
});

In just 6 lines of code we've created our tooltip "speech-bubble"! The tip option uses identical corner values as the positioning option discussed earlier. Refer back to that section for full details on all corner values.

Now let's make our tooltip a bit more interesting by changing the tips colour and size. We do this simply by specifying the two as sub-options of the tip object, like this:

$("jqueryselector").qtip({
   content: 'Stems are great for indicating the context of the tooltip.',
   style: { 
      tip: { // Now an object instead of a string
         corner: 'topLeft', // We declare our corner within the object using the corner sub-option
         color: '#6699CC',
         size: {
            x: 20, // Be careful that the x and y values refer to coordinates on screen, not height or width.
            y : 8 // Depending on which corner your tooltip is at, x and y could mean either height or width!
         }
}  }  });

Now let's see our above code in practice. You'll notice that our tip is now a lot shorter and longer than before, and it's an entirely different colour. Great! That's all with regards to tips, but read on for a more tutorials on further topics!

Back to the topDynamic Content

qTip has built-in support for retrieving and setting content dynamically through the use of jQuery's AJAX methods. It's also inredibly easy to set up! Let's take a look at a simple example:

$("jqueryselector").qtip({
   content: {
      url: 'localcontent.html'
   }
});

The above example will, when the tooltip is first shown, load the contents of the file localcontent.html and use it for the tooltips content. Easy!

Now let's see a more advanced example, which passes some data to the page we're about to load, which could be something like the ID of a news article, which the page could use to return a short bio about the article in question:

$("jqueryselector").qtip({
   content: {
      url: 'localcontent.html',
      data: { id: 5 },
      method: 'get'
   }
});

As you can see we also provided a third method option, which determines what type of request is used to retrieve the page and how the data is in turn sent. This can be two possible values: 'GET' or 'POST'.

And there we have it, that's how you retrieve dynamic content for your tooltips. For more information on the options used above, refer back to the Content option documentation.

Back to the topEffects

Tutorial coming soon... for now checkout the hide and show documentation!

Back to the topEvents

Tutorial coming soon... for now checkout the hide and show documentation!

Back to the topOverriding defaults

Tutorial coming soon...