How do you make a 'sticky' cluetip that opens on click, close on a click outside of the tip itself?

Question

I have a cluetip that is set to sticky and opens when one clicks a link. I also set a close button on the cluetip and all of that works great. I want to close the cluetip if someone clicks outside of the cluetip in addition to the current close button. I am looking for the hover out solution, just a close on click outside of the cluetip.

Answer 1

According to the FAQ, there is an API method to let you trigger a close:

New as of clueTip 1.0.3: How do I programmatically close (hide) a clueTip? If you want to trigger a clueTip to close, based on some other interaction, you can use the following code: $(document).trigger('hideCluetip');

So I think you could do something like this:

$('#myCluetip').cluetip({
  onShow: function() {
    $(document).one('mousedown',function() {
      $(document).trigger('hideCluetip');
    })
  });
});

This works by binding a one-time event handler for the mousedown event to the document body, which then triggers the event that the Cluetip folks say will hide open Cluetips. Using the one-time event handler means that you're not sending the hideCluetip trigger every single time somebody clicks on something.