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.

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

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 !

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!

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

Google translate

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


WebSnapr thumbailsview source

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 engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet Explorer 4.0Win 95+ 4X
TridentInternet Explorer 5.0Win 95+5C
TridentInternet Explorer 5.5Win 95+5.5A
TridentInternet Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
TridentAOL browser (AOL desktop)Win XP6A
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
GeckoFirefox 1.5Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
WebkitChromeWindows12A
WebkitChromeWindows16A
WebkitChromeWindows10A
WebkitSafari 3.0OSX.4+522.1A
WebkitiPod Touch / iPhoneiPod420.1A
PrestoOpera 7.0Win 95+ / OSX.1+-A
PrestoOpera 7.5Win 95+ / OSX.2+-A
PrestoOpera 8.0Win 95+ / OSX.2+-A
PrestoOpera 9.2Win 88+ / OSX.3+-A
PrestoOpera 9.5Win 88+ / OSX.3+-A
PrestoOpera for WiiWii-A
PrestoNokia N800N800-A
PrestoNintendo DS browserNintendo DS8.5C/A1
KHTMLKonqureror 3.1KDE 3.13.1C
KHTMLKonqureror 3.3KDE 3.33.3A
KHTMLKonqureror 3.5KDE 3.53.5A

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!