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');
});