hide on background click

[rseshadr]

I'm bringing up a qtip:

JS Code

$(selector).qtip({ 
            content: {
                  text:"some content"
                  ,title: {
                     text: "<strong>some title</strong>"
                     ,button: "[X]"
                  }
            }
            ,show: { solo: true,when: { event: 'click' } }
            ,hide: { 
               <span style="font-weight: bold;">when: {   event: 'click' }</span>
               ,effect: { type: 'fade' }
            }
            ,position: {
                 corner: {
                     target: 'topRight',
                     tooltip: 'topLeft'
                }
            }
            ,style:{border: { radius: 5 },
                   name: 'dark'}
         });

I would like the qtip to disappear by either

• a) click the close button (which works now),
• b) clicking the element that spawned it (which works intermittently)
• or c) clicking anywhere else on the page (which doesn't work)

Can anyone help me acheive this? Is something wrong in my declaration?

[Craig]

Hi rseshadr,

I'm actually using that exact setup for my documentation page examples. Here's the the code that will do it for you (Although probably not the best way to do):

JS Code

$('selector').qtip({
   hide: {
      when: {
         target: $(document.body).children().not( $(self) ),
         event: 'mousedown'
      }
   },
   show: {
      solo: true,
      event: 'click'
   }
});

[rseshadr]

craig Wrote:Hi rseshadr,

I'm actually using that exact setup for my documentation page examples. Here's the the code that will do it for you (Although probably not the best way to do):

JS Code

$('selector').qtip({
   hide: {
      when: {
         target: $(document.body).children().not( $(self) ),
         event: 'mousedown'
      }
   },
   show: {
      solo: true,
      event: 'click'
   }
});

Craig, thanks for the quick reply, this works but not quite fully...

• Clicking on the spawning element causes the tip not to toggle (disappear), but toggles twice (it reappears)Another issue is that my content is in an iFrame, and unfortunately clicks outside the frame also aren't captured

As it stands I think I'm going to leave my tip functionality as-is, but I will request a feature to be able to configure a tooltip to toggle on click of it's target element.

[Craig]

reshadr,

Looking over your code I noticed you've got both hide and show set to a click event, which at the moment isn't supported very well. This is probably the reason you're experiencing the toggling twice etc. Try changing one to mouseup/down and try different combinations, that should fix it for now until beta4 is released.

In regards to the iframe, clicks outside the frame? You mean when you click anywhere else on the document it doesn't hide?

[mcherm]

I am having a related problem and I thought I would add to this thread rather than creating my own.

I too want a tip that disappears when the user clicks anywhere outside of the tooltip. But in my case, my application makes extensive use of AJAX to load new content onto the page as the user interacts with the site. This leads to two problems with the "hide.when.target=$(document.body).children().not($(self))" solution:

(1) That solution registers an event handler on lots of DOM elements for closing each tooltip as it gets opened. If the user opens a bunch of tooltips the number of event handlers in the event handler chains will grow. Since in my application the user stays on the same page for a longer period of time (as new content is dynamically added and moved) I fear that the number of event handlers will grow to the point where performance becomes a problem. However, I have not actually observed this problem -- perhaps I am worrying unnecessarily.

(2) The existing infrastructure registers the event handlers at the time that the tooltip is created. Any page elements which get added afterward will NOT have event handlers, and clicking on these will not close the tooltip. This problem is actually preventing my application from working.

Ideally, I would want a single event handler for mousedowns anywhere which closed any open tooltips which did not contain the click. I would also be perfectly happy with using "hide.when.target=$(document.body).children().not($(self))" if I could get the code to run and the event handlers to be registered EVERY time the tooltip is displayed and removed when it is hidden (instead of being registered the FIRST time the tooltip is displayed). But I would strongly prefer not to modify or monkeypatch qTip (after all, I'd like to receive updates in the future!).

Any suggestions?

[rseshadr]

mcherm, craig,
Wouldn't that event-bubbling request from a different thread resolve this issue?

[Craig]

Quite right rseshadr, and I was ahead of you on this one!

I just implemented an 'unfocus' hide event type in beta4, which will allow you to hide tooltips when elements other than the tooltip and target element are clicked, without the need to bind excessive DOM handlers. This is a step towards the event delegation I want to implement library wide in 1.1.

Releasing beta4 on the 28th guys so be patient! Just polishing off the demos and documentation section updates and then it will be all yours!

[mcherm]

That's fabulous! Thank you Craig.

[abarroso]

Hi Craig,

That's really great! I was about to implement that to my code when I found this post. Are you releasing beta4 on the next few days?

Thanks,

-Alessandro

[xpand2]

Update to this thread regarding the beta 4:

This code now breaks in beta4:

JS Code

hide: { when: { target: $(document.body).children().not( $(self) ), event: 'mousedown' } },

It will hide when clicking anywhere outside the tip, but it will NOT hide when you reclick the item that brings up the tip. Instead the tip hides and reshows. In beta3 it would hide when clicking the item that calls the tip.

Suggestions Craig?

[Craig]

Hi xpand2,

This is now a native event in Beta4, which hides the tooltip when it loses focus e.g. anywhere except the tooltip is clicked:

JS Code

hide: 'unfocus'

[xpand2]

Beautiful! I love it! Thanks for the great work Craig

[huangjd]

Newb Question:

Where the heck do you put those lines of code for the hide effect to work?

I have this in the head tag of my page, and it doesn't work.

JS Code

<script>
 
        $(document).ready(function() {
            $("#findGroup").simpletip({ 
                persistent: true, 
                content:  '<asp:Image ID="cardExample" ImageUrl="images/card_examples.jpg" runat="server" o<strong></strong>nclick="close();"/>',
                position: 'right',
                hide: 'unfocus'
                });
         });
</script>

What I really want to do is that when someone clicks the image that is my content the qtip closes. I tried to use the images onclick event to call a javascript funtion that then uses API calls to close it. But the onclick event never gets fired or doesn't call my function. Any ideas?

Thanks in advance.

[Craig]

Hi huangjd,

Think you're a little confused as to what project this forum is geared towards. You're using Simpletip, the old library which I no longer actively develop for. The above code is for qtip only. Try updating to qTip first here: http://craigsworks.com/projects/qtip/download/

The equivalent code for the qTip project is this:

JS Code

<script>
$(document).ready(function() {
   $("#findGroup").qtip({ 
       content:  '<asp:Image ID="cardExample" ImageUrl="images/card_examples.jpg" runat="server" o<strong></strong>nclick="close();"/>',
       show: 'click',
       hide: 'unfocus',
       position: {
          corner: {
             tooltip: 'leftMiddle',
             target: 'rightMiddle'
          }
       }
    });
});
</script>

[huangjd]

Haha, that's funny. I accidentally downloaded simpletip and didn't even realize it.

One little problem, the unfocus is not what I want. How do I close the tooltip when the foreground ( the tooltip itself, or in my case the image) is clicked on. I've tried a number of things but can't seem to get it to work.

[Craig]

Specify you're show target as your image:

JS Code

$('#findGroup').each(function()
{
   $(this).qtip({ 
       content:  '<asp:Image ID="cardExample" ImageUrl="images/card_examples.jpg" runat="server" o<strong></strong>nclick="close();"/>',
       show: {
          when: {
             event: 'click',
             target: $(this).children('img')
          }
       },
       hide: 'unfocus',
       position: {
          corner: {
             tooltip: 'leftMiddle',
             target: 'rightMiddle'
          }
       }
    });
});

[huangjd]

Don't you mean, the hide target should be the image? I had tried that already and can't get it to work. And your example doesn't do the trick either.

Also, why did you change the outer function from:
$(document).ready(function() {

to:
$('#findGroup').each(function()


To me it looks like it's doing the same thing just a different way. Is that correct?

[Craig]

Yeah that's what I meant, but the outer function isn't changed , I just forgot to include the document.ready part. The .each function allows you to access each elements properties via the this statement, so its needed for the fix to work.

JS Code

$(document).ready(function(){
$('#findGroup').each(function()
{
   $(this).qtip({ 
       content:  '<asp:Image ID="cardExample" ImageUrl="images/card_examples.jpg" runat="server" o<strong></strong>nclick="close();"/>',
       show: {
          when: {
             event: 'click',
             target: $(this).children('img')
          }
       },
       hide: 'unfocus',
       position: {
          corner: {
             tooltip: 'leftMiddle',
             target: 'rightMiddle'
          }
       }
    });
});
});

[huangjd]

Couldn't you just make the hide target the qtip itself?

JS Code

hide: {
          when: {
             event: 'click',
             target: $(this)
          }
       }

Also, the code provided still doesn't work. Is it because the image is being wrapped in numerous divs?

JS Code

<div class="qtip qtip-defaults qtip-active" style="-moz-border-radius-topleft: 0pt; -moz-border-radius-topright: 0pt; -moz-border-radius-bottomright: 0pt; -moz-border-radius-bottomleft: 0pt; position: absolute; width: 250px; display: block; top: 467.5px; left: 402px; z-index: 6000;" qtip="0">
<div class="qtip-wrapper" style="overflow: hidden; position: relative; text-align: left;">
<div class="qtip-contentWrapper" style="border: 1px solid rgb(211, 211, 211); background: white none repeat scroll 0% 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">
<div class="qtip-content qtip-content" style="padding: 5px 9px; background: white none repeat scroll 0% 0%; overflow: hidden; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(17, 17, 17); text-align: left;">
<img id="cardExample" style="border-width: 0px;" src="images/card_examples.jpg"/>
</div>
</div>
</div>
</div>

[Craig]

Hi huangjd,

Sorry it took so lnog to get back to you, been very busy these past couple of days! Here's the code which should work for you.

JS Code

$(document).ready(function(){
   $('#findGroup').each(function()
   {
      $(this).qtip({ 
         content:  '<asp:Image ID="cardExample" ImageUrl="images/card_examples.jpg" runat="server" o<strong></strong>nclick="close();"/>',
         position: {
            corner: {
               tooltip: 'leftMiddle',
               target: 'rightMiddle'
            }
         },
         show: 'click',
         hide: 'click',
         api: {
            onRender: function()
            {
               var self = this;
 
               // Assign the hide method to a click event on the content
               self.elements.content.bind('click' self.hide);
            }
         }
      });
   });
});

[Thilo]

Hi Craig,

I am using hide: 'unfocus' to close the qTip by clicking outside of it and this works fine. But not on an iPad.

Your help is very appreciated.

Thanks.
Thilo

[Craig]

Unfortunately iPads are a bit tricky to develop for as... well I don't have one Do click events fire normally on an iPad?

[Thilo]

click events fire just fine.

In fact I do have the same issue on iTouch and iPhone. You might have one of those ;-)

So it is only possible to close the qTip by clicking on my closing icon which is quite small. and when I zoom to click it the qTip centres itself again and moves out of view.