Demossee qTip2 in action

HTML, Text and AJAX

qTip2 allows you to use not only regular textual content, but also complex HTML from other elements on the site. It can even pull content in from other pages via jQuery's .ajax() functionality, and supports in-built titles and close button.

  • Simple textview source
  • Inline HTMLview source
  • Close buttons
  • Add a title
  • Combined title and button
  • AJAX'd HTMLview source
  • Embedded <iframe>

Styles and Customisation

Not much of an artist? No problem! qTip2 comes with multiple styles that are ready for use, including ones from several other popular tooltip libraries. And with custom themes creatable with just a few lines of CSS, you'll be up and running in no time!

Choose a style from below to change the styling of every qTip on the page!

Basic

CSS3

qTip2 even supports styling via the jQuery UI Themeroller themes! Choose a theme from the Themeswitcher below to see it in action.

Positioning

Featuring a fully configurable, human-readable positioning system, qTip2 allows you to easily position your tooltips using element corners, and even reposition themselves when the viewport sizes changes! Have a play around below.

position.my
position.at
position.adjust.method

qTip2 also supports corner positioning on <map>, <area> and all standard <svg> shapes (+transforms!) via the optional Image map and SVG plugins! Even complex polygons and circles are supported!

Image maprect, poly and circle supported

Photo by NaturesPhotoAdventures under CC Share Alike 3.0 Unported license.

SVGall SVG 1.1 shapes supported

You can even use the mouse pointer as the positioning target

  • Open at the current mouse positionview source
  • Anchor the tooltip to the mouseview source

In addition to the smart corner system, there's a plethora (read: a lot) of additional positioning options readily available, with settings for everything from pixel-size adjustments to adjust criteria, including:

  • Adding small adjustments
  • Using a different target
  • Viewport repositioning

Show and Hide properties

Sometimes a regular mouseover just won't cut it, so why hack away? qTip2 provides a complete solution to defining custom show and hide properties, so you can open your tooltips on click, focus or !

  • Click (and click again!)view source
  • view source
  • Hide when clicking elsewhereview source
  • Stay visible when mousing onto tooltipview source
  • Custom hide and show delaysview source
  • Hide others when openingview source
  • Hide when inactiveview source
  • Hide after a variable mouse distanceview source

Not only are there multiple built-in properties to determine when your tooltips show and hide, but there's properties for describing how they do it i.e. individual, custom show and hide effects!

  • Sliding inview source
  • Fade in, slide outview source
  • jQuery UI effectsview source
  • Customised .animate()

Stacking properties

Ocassionally you'll want multiple tooltips visible within close proximity to eachother, but this can cause some headaches with z-index priority. Again, qTip2 has you covered, with in-built stacking functionality! Hover the tooltips below to see it in action.

qTip2 provides event hooks to detect the focus and blur as a tooltip gains and loses focus respectively. This llets you do nifty things, like animate it's position on focus like above!

API and Callbacks

Manipulating and customising the behaviour of the qTip2 library couldn't be easier using the builtin API, which features multiple callbacks and attributes to precisely fine tune your tooltips. We can use these features and callbacks to integrate with other 3rd party plugins and products too.

Dialogs (Utilising the Modal plugin)view source

  • Alert
  • Confirm
  • Prompt

Specialised dialogs

  • jGrowlview source

Video link previews

  • YouTube - Elf Owl Eatingview source
  • Vimeo - Eagle Owlview source

Google translate

Highlight some of these word(s). A tooltip will appear with the Spanish translation!

Geolocationview source

Google mapsview source

Twitter feedsview source

  • jQuery
  • Paul Irish

IMDb ratingsview source

  • The Dark Knight
  • Pulp Fiction

WebSnapr thumbailsview source

  • Facebook
  • YouTube

Event delegationAutomatically bind new elementsview source

Large data sets? Complex pages with dynamicly added element? qTip2 has you covered! Utilising jQuery's event delegation capabilities, it can lighten the initial page load, with the added bonus of applying tooltips to dynamically created elements, making integration with dynamic AJAX pages a breeze.

Plugin integrationqTip2 can also be integrated with various other jQuery plugins!

jQuery UIuser interface elements

Slider valueShow the slider value above the handle

FullCalendarfull-sized, drag & drop calendarview source

DataTablesDynamic HTML table interactionview source

Rendering engine Browser Platform(s) Engine version CSS grade
Trident Internet Explorer 4.0 Win 95+ 4 X
Trident Internet Explorer 5.0 Win 95+ 5 C
Trident Internet Explorer 5.5 Win 95+ 5.5 A
Trident Internet Explorer 6 Win 98+ 6 A
Trident Internet Explorer 7 Win XP SP2+ 7 A
Trident AOL browser (AOL desktop) Win XP 6 A
Gecko Firefox 1.0 Win 98+ / OSX.2+ 1.7 A
Gecko Firefox 1.5 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 2.0 Win 98+ / OSX.2+ 1.8 A
Gecko Firefox 3.0 Win 2k+ / OSX.3+ 1.9 A
Webkit Chrome Windows 12 A
Webkit Chrome Windows 16 A
Webkit Chrome Windows 10 A
Webkit Safari 3.0 OSX.4+ 522.1 A
Webkit iPod Touch / iPhone iPod 420.1 A
Presto Opera 7.0 Win 95+ / OSX.1+ - A
Presto Opera 7.5 Win 95+ / OSX.2+ - A
Presto Opera 8.0 Win 95+ / OSX.2+ - A
Presto Opera 9.2 Win 88+ / OSX.3+ - A
Presto Opera 9.5 Win 88+ / OSX.3+ - A
Presto Opera for Wii Wii - A
Presto Nokia N800 N800 - A
Presto Nintendo DS browser Nintendo DS 8.5 C/A1
KHTML Konqureror 3.1 KDE 3.1 3.1 C
KHTML Konqureror 3.3 KDE 3.3 3.3 A
KHTML Konqureror 3.5 KDE 3.5 3.5 A

flotAttractive JavaScript plottingview source

<your plugin here>get your plugin featured

If you're developing a plugin and think it'd be a perfect fit for qTip2 , get in touch and get it featured here!