List of qTip2 Implementation Samples

[kiddailey]

There are so many great sample implementations for various use cases of qTip2 (and some that are asked for repeatedly) that I thought I'd start organizing them into a list for all. This isn't a complete list by any means, so if you have any others to add just let me know. I'll try to update/reorganize this as often as I can.

Content

Use tooltip content from hidden elements located within the tooltip trigger itself

Use tootip content from a unique, hidden DIV element on the page, with an ID attribute based on the trigger's

Create a base, shared qTip configuration that is modified by some custom settings per tip

Use a single master tip for all tooltip triggers on the page rather than one tip for each

Toggle the contents of a tooltip on trigger click

Display a tooltip containing the highlighted text on a page

Retain the standard browser tooltip: Prerendered qTip / Non-prerendered qTip

Load content from an external file

Style

Have tooltips with different widths

Make the tooltip's width a percentage of the page or another element

Transparent tooltip (including content)

Transparent tooltip (background only)

Position

Position a tooltip absolutely to the page or a containing element

Position tooltips absolutely horizontally while keeping the vertical axis aligned with the tooltip trigger

Initialize qTips in a child iFrame so that they display outside the iFrame and position them relative to the iFrame

Behavior

Hide the tooltip when the user clicks anywhere on the page

Set focus on a form field within a tooltip

Hide all tips when a form field is blurred

Persist a tooltip until the user actively clicks the close button on the tip (with hover intent behavior) alt

When the user preses the CONTROL key, make the tip that is currently being displayed "static" at the mouse position until they click somewhere on the tooltip

Dynamically change the hide delay of a tooltip

Dynamically modify events after qTip initialization

Hide tip on pressing ESC key: Modal tip / Non-modal tip / Non-modal tip with temp event binding via namespace

Cancel a qTip's show event when using hover intent behavior

Test Cases

Form fields in tooltip

[Craig]

Great post kiddailey, I'll definitely be adding to this and sticky-ing the hell out of it!

[kiddailey]

Thanks Craig - I've got a handful more to add. Feel free to edit my post to add any you have as well.

[Dark Spot in the Corner]

Hello there, I wanted to add my Implementation to the list:

It's a javascript for World of Warcraft related sites that automatically adds tooltips to specific Battle.net links.

A Demo page can be found here: http://dev.dsitc.de/demos/wow-data-tooltip/

Also, I added the ability to hold down SHIFT in order to display extended / alternate content in the tooltip. Works like a charm so far. :-)

[ajkochanowicz]

Tooltips that permanently close via a cookie

I just finished a little 24 hour project to make a qtip that will close...and stay closed.

I was inspired by Google Docs. When you go to Docs for the first time, you get nice little helpful tool tips pointing out the key areas. This also happens for existing users when new features come out. When you close these tips, they just stay closed, even when you refresh your browser.

This will do the same thing. However, for simplicity's sake, I've set this to create a year-long cookie to keep the tooltip off. Try out the demo by exiting out of the tooltip. When you refresh, it will never show up again. You can reset the cookie by clicking the button in the corner.

This will be helpful for websites where you want to highlight new features, but let your users dismiss these once they get the picture. It's also nice for websites that require a little pointing and explanation at first.

Demo: http://powabunga.nfshost.com/qtip/
Download: https://docs.google.com/viewer?a=v&pid=e...NTEw&hl=fr

(Fichier>Télécharger)