How to dismiss a Twitter Bootstrap popover by clicking outside?

Showing 1-3 of 3 messages
How to dismiss a Twitter Bootstrap popover by clicking outside? Ante Vrli via StackOverflow 7/28/12 10:17 AM

Can we get popovers to be dismissable in the same way as modals, ie. make them close when user clicks somewhere outside of them?

Unfortunately I can't just use real modal instead of popover, because modal means position:fixed and that would be no popover anymore. :(



Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside
How to dismiss a Twitter Bootstrap popover by clicking outside? Pigueiras via StackOverflow 7/28/12 10:42 AM

I made a jsfiddle to show you how to do it:

http://jsfiddle.net/3yHTH/

The idea is to show the popover when you click the button and to hide the popover when you click outside the button.



Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside/11703282#11703282
How to dismiss a Twitter Bootstrap popover by clicking outside? Sherbrow via StackOverflow 7/28/12 11:12 AM

This is basically not very complex, but there is some checking to do to avoid glitches.

Demo (jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});


Please DO NOT REPLY directly to this email but go to StackOverflow:
http://stackoverflow.com/questions/11703093/how-to-dismiss-a-twitter-bootstrap-popover-by-clicking-outside/11703487#11703487