Notice: qTip 1.0 is no longer actively developed, and is superseded by qTip2. Click here to check it out!

Find out what qTip has to offer

Features

  • All modern browsers supported

    We currently support all the major browsers on the market today (and more!) including:
    Internet Explorer 6.0+
    Firefox 2.0+
    Opera 9.0+
    Safari 3.0+
    Google Chrome 1.0+
    Konqueror 3.5+
     

    Note: We're resolving browser-dependant issues constantly so if you find a bug, report it!

  • JavaScript disabled? No problem!

    Since all of qTip's HTML is generated dynamically people with it disabled will see no leftovers, making qTip completely degradable!

    qTip also has feature detection built-in to it's library, so unsupported features are disabled by default.

  • Don't be a square

    As we all know, major browser support, or lack there of, of the new CSS3 border-radius attribute throws a proverbial spanner in the works when creating reliable rounded corners. The solution?
    Create a cross-browser border-radius engine that doesn't require PNG's.
    So that's exactly what we did! Complete with seperate width and radius attributes and color setting.
    Here's some examples of what's capable with our new engine, whoooosh!

    Note: If you don't get this reference or you're not from the UK... see here and enjoy our favourite dance!

  • Speech-bubble effects

  • Forget your x and y's

    Throw out your rulers boys and girls, because positioning tooltips in qTip is as easy as picking two corners. Pick one on the tooltip and one of the target element, and bam! Done.

    corner: { target: 'topMiddle', tooltip: 'bottomMiddle' }
    Corners are the new x and y's! And there's 13 of them all together:

    Note: The corner values used for positioning are also used for the tips's corner attribute!

  • Styling made easy

    qTip comes pre-packed with 6 elegant tooltip styles for use without any extra code!
    Creating your own styles is a snap. Simply create a custom style using the style object and apply it using the style.name option!
     
                      $.fn.qtip.styles.myTooltip{
       tip: 'leftMiddle',
       border: {
          width: 10,
          radius: 6,
          color: '#FA6900'
       },
       background: '#F38630',
       color: '#333'
    }
    style: { name: 'myTooltip' }
                   
  • Keep the focus

    When you've got a lot of tooltips on a page, especially ones which appear pretty close together, you can run into problems with overlapping. Not a problem with qTip! Tooltips automatically focus when hovered over, and even preserve their stacking order on the page.

    One tooltip Two tooltips Three tooltips Four tooltips And five!

    Hover over the tooltips above for a demonstration. Notice how the stacking order is preserved.

  • Click the tooltips! Create some funky effects

    By default, qTip comes with fade, slide and grow effects for showing/hiding your tooltips.
    Support for custom effect functions means that you've got an unlimited amount of effects at your fingertips!

    Note: The custom effects here use the jQuery UI library, but it is not required if you wish to make your own animations!

  • Dynamic content at your fingertips

    Thanks to jQuery's AJAX support, content can be loaded dynamically even after the page is loaded! Infact, the tooltip below loads new content everytime its clicked... try it and see.
     

    Note: Content is hosted locally but is taken from the almighty Wikipedia.

     
  • Unleash your inner developer

    qTip comes with a fully fledged scripting API allowing you easily extend the libraries functionality through a variety of optional callback methods and library attributes.

    It's even possible to write your own qTip plugins (plugins for a plugin you say!?) using this API, so developers... get coding!

    For full details on the Scripting API checkout the documentation!