Is there a way to close a Twitter Bootstrap popover on click outside the popover?

Question

Possible Duplicate:
How can I close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

I would like the Twitter Bootstrap popover to close only when the user clicks outside of the popover. I don't want clicks inside the popover closing the popover. I've searched and the answers for this are for even clicking the inside of the popover closes the popover. Please no gem suggestions too if possible because I am looking for a code solution. Thank you!

html:

<a id="test-button" href="#" class="btn">Popover</a>

javascript/jquery:

$('#test-button').popover({content:"stuff", trigger:'click'});

This is not a duplicate. If you read my description, the answer for that question even closed the popover when it was clicked inside the popover. I don't want that to happen. I want it to close only if it is outside the popover. — perseverance, Nov 21 '12 at 04:41

score 6 · Accepted Answer · answered Nov 21 '12 at 03:40

6

I found this question, which APPEARS to be a duplicate, however the top answers did not work for me. I ended up modifying the code by adding a new click bind to .popover whenever one is toggled, which resulted in the desired effect.

Working jsFiddle: http://jsfiddle.net/asanger/AFffL/266/

var isVisible = false;
var clickedAway = false;

$('.popup-marker').popover({
        html: true,
        trigger: 'manual'
    }).click(function(e) {
        $(this).popover('show');
        clickedAway = false
        isVisible = true
        e.preventDefault()
            $('.popover').bind('click',function() {
                clickedAway = false
                //alert('popover has been clicked!');
            });
    });

$(document).click(function(e) {
  if(isVisible && clickedAway)
  {
    $('.popup-marker').popover('hide')
    isVisible = clickedAway = false
  }
  else
  {
    clickedAway = true
  }
});

answered Nov 21 '12 at 03:40

Alec Sanger

4,442
1
33
53

Thanks. This variant is the only one I've found which hides the popup when the click is outside the window but NOT when it is inside it. – Björn Lindqvist Jan 16 '13 at 13:15
1

This works well, but if a user clicks the `.popup-marker` again, the popover hides and shows up again. I believe the expected experience should be: Click `.popup-marker`, show popover. Click outside `.popover` — including `.popup-marker`, then hide popover (do not re-show `.popover`). Any tips to accomplish this? – Ryan Apr 11 '13 at 06:20
1

Quick fix: change the `$(this).popover('show');` to `$(this).popover('toggle');` and it works perfectly. – Ryan Apr 11 '13 at 06:23
1

I think it's the perfect and best solution. Simple and precise (y) – sohaiby Aug 08 '15 at 09:47

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Use the manual trigger:

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 21 '12 at 03:14

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 3 · answered Nov 21 '12 at 03:24

0

You could attach to a top level element's click event. I.e.

$("#main").click(function () {
    $('#mything').popover('hide')
});

answered Nov 21 '12 at 03:24

ben author

2,855
2
25
43

Is there a way to close a Twitter Bootstrap popover on click outside the popover?

3 Answers3

Use the manual trigger: