Please Log-in or Register to get full access to the forums.


Post Reply 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
List of qTip2 Implementation Samples
12th April, 07:41
Post: #1
List of qTip2 Implementation Samples
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

Permanent tooltip that expands with additional info on mouseover

Test Cases

Form fields in tooltip
Find all posts by this user
Quote this message in a reply
12th April, 11:50
Post: #2
RE: List of qTip2 Implementation Samples
Great post kiddailey, I'll definitely be adding to this and sticky-ing the hell out of it!
Visit this user's website Find all posts by this user
Quote this message in a reply
12th April, 18:12
Post: #3
RE: List of qTip2 Implementation Samples
Thanks Craig - I've got a handful more to add. Feel free to edit my post to add any you have as well.
Find all posts by this user
Quote this message in a reply
26th July, 08:50
Post: #4
RE: List of qTip2 Implementation Samples
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. :-)
Find all posts by this user
Quote this message in a reply
10th August, 08:08
Post: #5
RE: List of qTip2 Implementation Samples
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)
Find all posts by this user
Quote this message in a reply
26th November, 22:11
Post: #6
RE: List of qTip2 Implementation Samples
Tooltip which expands on mouse enter

A small tooltip is shown permanently. When a mouse enter event occurs (either on the element itself or the small tooltip) the expanded tooltip with content is shown.

The small permanent tooltip can be used to hint where this is a tooltip available (e.g. a user comment on an element).

Demo: http://jsfiddle.net/CW2Dp/3/
Find all posts by this user
Quote this message in a reply
26th November, 22:32
Post: #7
RE: List of qTip2 Implementation Samples
Thanks for the additions, everyone!

@ajkochanowicz: Any chance you can repost the demo somewhere?
Find all posts by this user
Quote this message in a reply
27th November, 08:45
Post: #8
RE: List of qTip2 Implementation Samples
Update to peterburn's example using the API instead of binding multiple tooltips http://jsfiddle.net/CW2Dp/4/ Smile Good to see you posting again too kiddaily Smile
Visit this user's website Find all posts by this user
Quote this message in a reply
27th December, 13:18
Post: #9
RE: List of qTip2 Implementation Samples
"Set focus on a form field within a tooltip" http://jsfiddle.net/kiddailey/uby9x/6/

This one doesn't seem to work neither in Chrome nor in Firefox for me. Using latest versions of both. Is this a bug in qtip or am I doing something wrong?
Find all posts by this user
Quote this message in a reply
27th December, 22:13 (This post was last modified: 27th December 22:14 by kiddailey.)
Post: #10
RE: List of qTip2 Implementation Samples
(27th November 08:45)Craig Wrote:  Update to peterburn's example using the API instead of binding multiple tooltips http://jsfiddle.net/CW2Dp/4/ Smile Good to see you posting again too kiddaily Smile

Updated above with link to your revised version, thanks! And yes -- I've been here off and on but haven't had a lot of time to do much besides block spammers and read a few posts. Hoping that will change with the new year though.

(27th December 13:18)wizzie Wrote:  "Set focus on a form field within a tooltip" http://jsfiddle.net/kiddailey/uby9x/6/

This one doesn't seem to work neither in Chrome nor in Firefox for me. Using latest versions of both. Is this a bug in qtip or am I doing something wrong?

Looks like the qtip classnames have been changed a bit. Fixed and updated the link above to this revised version
Find all posts by this user
Quote this message in a reply
13th June, 15:00
Post: #11
RE: List of qTip2 Implementation Samples
http://jsfiddle.net/kiddailey/UyZnb/

this one doesnt show on my chrome. why?
Find all posts by this user
Quote this message in a reply
15th June, 05:16
Post: #12
RE: List of qTip2 Implementation Samples
(13th June 15:00)Theopt Wrote:  http://jsfiddle.net/kiddailey/UyZnb/ this one doesnt show on my chrome. why?

That particular one is linking to the qTip nightlies, and I'm seeing an error in the Chrome console within qTip (Uncaught TypeError: Object #<Object> has no method 'done' ).

I updated it to point to the version 2.0.1 release and it works fine. Also updated the link in the original post:

http://jsfiddle.net/kiddailey/UyZnb/446/
Find all posts by this user
Quote this message in a reply
19th January, 18:33
Post: #13
RE: List of qTip2 Implementation Samples
Hi Craig,

This is an awesome plugin qtip2!

We were very inspired by it and we are using it in our site as well.

Infact, we have built a live customization demo like a fiddle for the plugin. Check out here -http://bitconfig.com/qtip2/bitconfig_qtip2.html

Hope this will help developers. Let us know if you got any other great plugins.

- Patrick
Find all posts by this user
Quote this message in a reply
20th January, 20:50
Post: #14
RE: List of qTip2 Implementation Samples
Adding clickable link for the above post
qtip2 live customization
Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  Getting different data out of list funkyduke 0 91 1st October 15:56
Last Post: funkyduke
  Need help with javascript implementation bumpusdoggie 3 340 15th April 15:40
Last Post: bumpusdoggie
  [Solved] Syntax-Error Javascript missing } after property list bial 2 1,509 19th October 17:27
Last Post: bial
  Wordpress Implementation Theme Issue iLoveLobster 2 845 2nd September 06:57
Last Post: nickCR
  tips in li list anerDev 1 780 20th August 13:00
Last Post: Craig
  Wordpress Implementation Not Functioning Properly kmv22 1 823 10th July 11:08
Last Post: Craig
  [Solved] qTip2 within qTip2 modal causing overlay to hide wiredmonkey 10 3,972 26th March 09:46
Last Post: oldie85
  [Solved] Form inside modal qtip2 with inside hidden modal qtip2 class jep 1 2,548 4th September 22:09
Last Post: Craig
  qtip jgrowl implementation has a small bug davin 2 2,374 20th July 18:27
Last Post: Craig
  qtip implementation on carousel image gallery deepblue_tiano 5 3,187 25th March 15:39
Last Post: sparky672



User(s) browsing this thread: 1 Guest(s)