qTip for auto complete using onkeyup problem

[atDev]

I have a text field.

I use the jquery keyup function and when text is entered I do an AJAX call to a script to get some results.

I then create a qtip instance on the text input field to show the results.

The issue is, a new qtip instance is getting created EVERY time the keyup function runs.

Is there a way to...
1. Check if a qtip exists on the text input ID/element and if so, update the contents and show
2. Destroy any existing qTips before the new one is displayed?

I tried using the $("#myID").qtip("destroy"); function in the onHide event but I get:
f(this).data("qtip") is undefined

[Craig]

atDev, try using the onRender callback to set up a keyup event instead, and change the tooltips contents:

JS Code

$('.selector').qtip({
   content: 'test',
   api: {
      onRender: function()
      {
         var self = this;
 
         $('input').keyup(function()
         { 
             // Do some ajax call here and use the callback to change the tooltip content
             $.get('url', data, function(data)
             {
                self.updateContent(data.value);
             });
         });
      }
   }
});

Hope this is clear to you. Let us know how you get on!

[atDev]

Thanks this will probably work as well.

I entered up using the jQuery "one" function to initialize the qTip on focus of the text input field. Then just used the "keyup" event to update the content and run the "show" event on the qTip.

[atDev]

I have another similar issue.

I don't want to initialize a qTip until the mousover event of a link.

So I have:

<a id="something" href="" onmouseover="$('#something').qtip({ ... });">?</a>

But again it is creating duplicate instances. Is there a better way to do this? Again, I don't really want to initialize the qTip unless I have to from the onmouseover event.

[Craig]

atDev, you could again use the .one() method you used above to apply the mouseover? You'll be glad to know in the 1.0 version it has 'hoverIntent' built in, so mousing over the link accidentally won't trigger the tooltip rendering as it unfortunately does at the moment.

[atDev]

craig Wrote:atDev, you could again use the .one() method you used above to apply the mouseover? You'll be glad to know in the 1.0 version it has 'hoverIntent' built in, so mousing over the link accidentally won't trigger the tooltip rendering as it unfortunately does at the moment.

Well the different here is I already have the code under the "a" "onmouseover" event. So to use "one" to create the tooltip would require a different JS snippet outside of the onmouseover event. I was trying to eliminate having extra javascript outside of this for these tooltips since I have about 20-30 tooltips on each page.

It would perhaps be cool to have an option like...

$('#something').qtip({ duplicates: false });

Which would prevent duplicate qTips on the element. (i.e. destroy any before generating a new one).

Or possibly...

$('#something').qtip({ update: true });

Which would update an already existing qTip instead of generating a new one, if a qTip already exists on that element ID.

[Craig]

atDev, I've given this some thought and think this is actually the way qTip should work by default. Since the primary purpose of the script is basic tooltip replacement, the newest branch, by default will only allow one tooltip attached to any element at one time. You can however adjust this on a per-element basis using the new exclusive option:

JS Code

$('.selector').qtip({
   exclusive: false // Alow more tooltips to be attached
});

[atDev]

Great, look forward to the new version.