[Solved] [Solved] Troubles with hiding Qtip on click+unfocus

[walker2238]

I'm not sure if this a bug or maybe I'm doing something wrong (My JS skills are weak) but the problem I'm experiencing is that I'd like to have images which when clicked show the Qtip and when the user clicks the image or any area of the browser window the Qtip becomes hidden.

The problem is that when I click the image when the Qtip is being shown the Qtip hides for only a brief moment and then reappears.

JAVASCRIPT Code

$('a.avatar-thumbnail').each(function() { 
      $(this).qtip({
         content: {
            title: {
              text: '<a href="' + $(this).attr('href') + '">' +  $(this).children("img.thumbnail").attr('alt') + '</a>',
              button: 'Close',
            },
            text: '<span class="throbber-small">Loading...</span>',
            ajax: {
              url: $(this).attr('href') + ' span.flag-subscribe',
              //url: $(this).attr('href') + ' h1, span.flag-subscribe'
            }
         },
         position: {
            my: 'top center',
            at: 'bottom center',
            effect: false,
         },
         show: {event: 'click', solo: true, effect:false, delay:50},
         hide: {event: 'click unfocus', fixed: true, effect:false, delay:0}, 
      });
   });

[Craig]

Try removing click from the hide event and just use unfocus

[walker2238]

Hey Craig,

I've tried that with the same result. If I click anywhere except the selector element than everything works fine. But when clicking the selector element with Qtip shown Qtip closes for a brief moment then reappears.

I should also mention that the reason I use click and unfocus is because I saw another forum post in which this did indeed create the desired outcome. However I do remember the example wasn't using an ajax call, so could this be a bug?

Also not sure if it helps but I'm testing this in FF9 and Chromium.

[Craig]

Please setup a test case: http://jsfiddle.net/fdavn/

[walker2238]

I've set up a quick example but it's just a copy of my localhost (Drupal 7) so a lot of things might be messed up.

I've narrowed down the issue I believe. When I use an anchor with a text title it seems that Qtip behaves. The problem and my user case is that using an image instead of the text causes this.

---

http://jsfiddle.net/fDavN/2626/

[Craig]

You're applying it to the <a> element which has different dimensions than the image itself. Make the image a block element using "display: block;" as by default it's inline and hence has line-spacing. http://jsfiddle.net/fDavN/2631/

[walker2238]

(7th February 17:09)Craig Wrote:  You're applying it to the <a> element which has different dimensions than the image itself. Make the image a block element using "display: block;" as by default it's inline and hence has line-spacing. http://jsfiddle.net/fDavN/2631/

I'm not sure I understand.

The second example (Just the link without an image) was just to show the desired effect. You'll notice that for that link when the Qtip is shown that you can hide it by clicking either the link or anywhere else on the page.

But you'll notice that with the image nested in the link that when you click the image itself to hide it it flickers. The recommended styling you gave doesn't fix this.

[Craig]

Ah my bad sorry, wasn't paying attention to the thread title when I wrote that. This is actually a bug in the unfocus code, try the jsFiddle link now with the latest code (clear cache) and it should work.

[walker2238]

(7th February 19:32)Craig Wrote:  Ah my bad sorry, wasn't paying attention to the thread title when I wrote that. This is actually a bug in the unfocus code, try the jsFiddle link now with the latest code (clear cache) and it should work.

Perfect, thank you so much for your time.