Can I toggle popup after a click event with a mouseout event?

Question

I'm using twitter bootstrap to display popovers with a click event. I'm requesting the info with the click event but I want to hide the popover after it looses focus so the user isn't required to click it again. Is this possible?

Basically I want to show the popover with a click event but then when the launch point looses focus from the mouse the popover is hidden.

Here is a link to the popover doc from twitter-bootstrap: http://twitter.github.com/bootstrap/javascript.html#popovers

This is what I'm currently doing:

jQuery:

$('.knownissue').on('click', function() {

    var el = $(this);

    if (el.data('showissue') == 'true') {
        el.popover('toggle');
        el.data('showissue', 'false');
        return;
    }

    $.post('functions/get_known_issues.php', function(data) {
       if (data.st) {
           el.attr('data-content', data.issue);
           el.popover('toggle');
           el.data('showissue', 'true');
       }
    }, "json");

});

Any thoughts?

Answer 1

The following should work.

$('.knownissue').mouseleave(function() {
    $(this).popover('hide');
});

Answer 2

Here is a custom jQuery event I call 'clickoutside'. It gets fired if and only if you click the mouse outside of the target element. It could easily be adapted for other event types (mousemove, keydown, etc). In your case, when fired it could close your modal.

(function ($) {
    var count = 0;

    $.fn.clickoutside = function (handler) {
        // If the source element does not have an ID, give it one, so we can reference it
        var self = $(this);
        var id = self.attr('id');
        if (id === '') {
            id = 'clickoutside' + count++;
            self.attr('id', id);
        }

        // Watch for the event everywhere
        $('html').click(function (e) {
            var source = $(e.target);

            // ... but, stop it from propagating if it is inside the target 
            // element. The result being only events outside the target
            // propagate to the top.
            if (source.attr('id') == id || source.parents('#' + id).length > 0) {
                return;
            }

            handler.call(this, e);
        })
    };
})(jQuery);

 $('#targetElement').clickoutside(function(){ 
 });

EDIT: Example JSFiddle.