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
- Add a title
- 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!
qTip2 even supports styling via the jQuery UI Themeroller themes! Choose a theme from the Themeswitcher below to see it in action.
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.
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()
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
- jGrowlview source
Video link previews
- YouTube - Elf Owl Eatingview source
- Vimeo - Eagle Owlview source
Google mapsview source
Twitter feedsview source
- Paul Irish
IMDb ratingsview source
- The Dark Knight
- Pulp Fiction
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 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||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||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|
<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!