Difficulty with show api

[Ben Jacobs]

Hi,
I am having problems with getting the show api to work correctly. I have a dynamically built list and beside each item in the list is a "go" button and when this is pressed it makes an AJAX request and at that point I want to create a dynamically built qtip that then also drops down and displays the results of the AJAX response. The AJAX works fine but I am having problems with the qtip api show not working correctly. Here is a simplified version of the code:

JS Code

function goButtonPressed (){
  $("#qtipDiv").qtip({ 
      content: 'This works',
      style: { 
         tip: {corner:'topLeft'},
         style: {border:{width: 5, radius: 10}}
      },
      position: {corner: { target: 'bottomLeft' } },
      show: { when: { target: $('#some-link'), event: 'click' }, effect: { type: 'slide', length: 250 } },
      hide: { when: { target: $('#some-link'), event: 'click' }, effect: { type: 'slide', length: 250 } }
   });
 
  $('#qtipDiv').qtip('show');
}

Now the tip is being built cause when I click the "some-link" anchor tag, it shows the qtip but the qtip is not being auto displayed when the go button is being pressed and this js is being executed. Thanks for your help... I have been wrestling with this for a couple of days now.

Ben

[Ben Jacobs]

I was able to achieve this by removing the

JS Code

$('#qtipDiv').qtip('show');

and then making the some-link <a> tag hidden and doing a

JS Code

$("#some-link").click();

Different solution, same results.

[Craig]

Ben, you need to add in the show.ready option to your code if you want the tooltip to be bound AND shown on first event fire.