Hide when clicking anywhere BUT the tooltip

[jackmcdade]

Hey there, what would be the correct method for hiding the tooltipsy when you click anywhere BUT in the tooltip? For example, i'm using the tooltip to display some webapp controls, and i want them visible until you click elsewhere.

[briancray]

Try:

$('.hastip').tooltipsy();
$(document).click(function () {
    $('.hastip').data('tooltipsy').hide();
});

[briancray]

Go ahead and close it if this fixes your issue. Also, instead of hide() you can do destroy() if you want the tooltip removed permanently from DOM.

[jackmcdade]

Yeah i tried that, but it closes the tooltip when you click inside the tip too. Also, it only closes the first instance of a tooltip, it won't close them all. So i tried to play with stopPropagation(), but it caused some other issues.

What should hideEvent be set to?

[jackmcdade]

Also, i'm using showEvent: 'click', so your example prevents tooltipsy from running at all.

[briancray]

something like this may work:

$(document).click(function (e) {
    if (e && e.target && $(e.target).hasClass('tooltipsy')) {
        return;
    }
    $('.tooltipsy').parent().hide();
});

[jackmcdade]

Well that would remove the link that triggers the tooltipsy, not the tooltipsy itself. It works for the first instance if i target .data('tooltipsy').hide(), but not any other occurances on the page.

If i'm using a class selector, how do i make sure i kill the RIGHT instance of tooltipsy?

[jackmcdade]

Here's my code. Obviously the hideEvent won't work with click events in it's current form, but i really can't get an event to trigger that will allow me to remove the correct popover and still allow me to trigger it again.

$('.pop').tooltipsy({
    showEvent: 'click',
    hideEvent: 'focusout',
    alignTo: 'element',
    offset: [-15, 0],
    content: $('#popover-content').html(),
    show: function (e, $el) {
        $el.show();
    },
    hide: function (e, $el) {
        $el.hide();
    },
    delay: 0,
    className: 'popovers',
    css: {}
});