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.

Answer 2

Here's how I did it:

    onShow: function() {
        // close cluetip when users click outside of it
        $(document).click(function(e) {
            var isInClueTip = $(e.target).closest('#cluetip');
            if (isInClueTip.length === 0) {
                $('.cluetip-default').hide();
            }
        })
    },

Answer 3

It would be helpful to see your code but anyway you can do something along these lines;

$(document).click(function(e) {
    if (!$(e.target).hasClass('cluetip'))
    {
      // Close the cluetip here.  
    }
});

Answer 4

Stony's solution did not work for me.

I used @Gary Green's solution, and it works ok - but that's still not the exact "close on mouseout/hoverout" solution I wanted.

Finally, I figured out that Cluetip itself provides a way to do this.

Just set the value "mouseOutClose: false" , like this:

$("#myForm :input").cluetip(
    {
        sticky: true, 
        closePosition: 'title', 
        arrows: true,
        mouseOutClose: true
    }
);