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
.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!
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.
Image maprect, poly and circle supported
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!
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.
- jGrowlview 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!
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!