[Solved] Using 2 qtips on 1 element with different triggering events

[David]

I want to use qTip both for a hovering tooltip and a onclick-dialog on the same element. So if the user hovers over the element, some static information should be displayed, but if the element is clicked, an AJAX-loaded form should appear. I'd like to use qTip for both cases to get a more consistent styling and interface.

Is this possible? Or should I create the qtip instance on the fly when clicking the element (and thus remove the hover qtip and replace it with the other one)?

[Craig]

This is indeed possible and very easy to accomplish. It's not documented yet, but you also need to be aware of how multiple qTip's are handled on a single element if you're going to use the API functionality for both.

First, create the qTips as usual using the qTip call like so:

JS Code

$('.selector').qtip({ options here });

You can do this as many times you want on a single element, and they will all activate normally as seperate entities, just like they would if you were referencing multiple elements.

When you create a tooltip on an element, the most recently created tooltips API is available through the use of the regular API retrieval like so:

JS Code

$('.selector').qtip('api')

However, if you have more than one tooltip present on an element, in order to access the API of each individual tooltip you'll have to use one of two methods:
1. Reference the tooltip directly instead of the target element and retrieve it from there
2. Utilise the new interfaces object introduced in RC3 onwards

In order to use the second method, you need to know a few things. First is to know how to access an elements interfaces object.

Each element, when creating a tooltip on it, automatically receives an interfaces array. This array contains references to all qTips (e.g. thieir API's) currently targeting that element. It can be retrieved like so:

JS Code

$('.selector').qtip('interfaces');

Second, the interfaces array has the 'current' property, which contains the array index of the most recent tooltip created on that element. Tooltips are stored in the array from most old to most recent. Therefore, when you call the .qtip('api') method, what you're actually doing is retrieving the last API object within the interfaces array. So this:

JS Code

$('.selector').qtip('api')

...is equivalent to...

JS Code

$('.selector').qtip('interfaces')[ $('.selector').qtip('interfaces').current ];

So for example, if I wanted to hide the first tooltip I created e.g. in your case the 'on hover' tooltip, I could do this:

JS Code

$('.selector').qtip('interfaces')[0].hide();

And if I wanted to hide the second (last created) tooltip e.g. in your case the 'click' tooltip, I could use either of these two methods:

JS Code

var interfaces = $('.selector').qtip('interfaces');
interfaces[ interfaces.current ].hide();

JS Code

$('.selector').qtip('api').hide();

And that's about it. Obviously all API functionality is available using these methods, but you get the general idea I hope.

[ramalaks]

I have 2 qtips created on a same element at a different time and condition. When working on them, is there a id to find out the right Qtip. As The order they get created is random, I am not sure $('#selectorid').qtip('interfaces')[0] is always the the one I want or the current one $('.selector').qtip('api')
is the always the one I want.

I want to find a qtip by id (2 qtips on a same element) to update its content.

how to solve the problem.?

[Craig]

ramalaks, there isn't unfortunately... you might try out qTip2 and checkout the tutorial here: http://craigsworks.com/projects/qtip2/tu...ced/#multi

[ramalaks]

I solved the problem by saving the data retrieving it..

jQuery('#'+id).data("qtip1", jQuery('#'+id).qtip("api")); (save)

api = jQuery('#'+id).data("qtip2");( retrieve..)

thanks
Ramalaks