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. 🙁
Best Answer
Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/
For buttons containing text only:
For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this answer)
For JS Generated Popovers Use
'[data-original-title]'
in place of'[data-toggle="popover"]'
Caveat: The solution above allows multiple popovers to be open at once.
One popover at a time please:
Update: Bootstrap 3.0.x, see code or fiddle http://jsfiddle.net/mattdlockyer/C5GBU/2/
This handles closing of popovers already open and not clicked on or their links have not been clicked.
Update: Bootstrap 3.3.6, see fiddle
Fixes issue where after closing, takes 2 clicks to re-open
Update: Using the conditional of the previous improvement, this solution was achieved. Fix the problem of double click and ghost popover: