Rectangle 27 11

None of supposed high-voted solutions worked for me correctly. Each leads to a bug when after opening and closing (by clicking on other elements) the popover for the first time, it doesn't open again, until you make two clicks on the triggering link instead of one.

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Nice, it is working for me. BTW you forgot a ); at the end of your code after last }

Had the same problem related to the second click. This should be the failsafe answer!

I also tried the previous solutions above, but as a guidance to those who are also looking for a solution as of 2016, this is a better solution.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 10

None of supposed high-voted solutions worked for me correctly. Each leads to a bug when after opening and closing (by clicking on other elements) the popover for the first time, it doesn't open again, until you make two clicks on the triggering link instead of one.

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})

Nice, it is working for me. BTW you forgot a ); at the end of your code after last }

Had the same problem related to the second click. This should be the failsafe answer!

I also tried the previous solutions above, but as a guidance to those who are also looking for a solution as of 2016, this is a better solution.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 17

I don't think you need to do it in two separate steps (click then popover), nor do you need the div unless there's some reason for that which you haven't mentioned. This works for me:

$('.map').popover({trigger:'click',placement:'left',html:true,content:function(){
     return getMap({center: $(this).text()})
  }});    
});

You can then remove the center: 'New York, NY', line from your getMap params.

<a href="#" class="map">New York, NY</a>

If you were using the #map div to make the popover larger, just change the CSS of the popover instead, by doing something like:

.popover { width: 512px; height: 512px; }
$('.map').popover({...,content:function(){      return getMap({center: $(this).text()})   }});     });

This code works well, The problem I had with location variable!!

Yeah, location is not a good variable to use with JavaScript because some browsers will interpret it as you wanting to go to that URL. I'm glad you got it working though.

jquery - how to use twitter bootstrap popover for dynamic content - St...

jquery google-maps twitter-bootstrap popover
Rectangle 27 15

+1, but important side note: This does not close the popover, if you click again on the button or anchor, while the accepted answer does.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 15

+1, but important side note: This does not close the popover, if you click again on the button or anchor, while the accepted answer does.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 34

The accepted solution gave me some issues (clicking on the '.popup-marker' element of the opened popover made the popovers not work afterwards). I came up with this other solution that works perfectly for me and it's quite simple (I'm using Bootstrap 2.3.1):

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

UPDATE: This code works with Bootstrap 3 as well!

great use of $.not!

Best solution!!!! Thanks a lot!!!!

if (!$(e.target).is('.popup-marker') && !$(e.target).parents('.popover').length > 0)

javascript - How can I close a Twitter Bootstrap popover with a click ...

javascript jquery twitter-bootstrap
Rectangle 27 34

The accepted solution gave me some issues (clicking on the '.popup-marker' element of the opened popover made the popovers not work afterwards). I came up with this other solution that works perfectly for me and it's quite simple (I'm using Bootstrap 2.3.1):

$('.popup-marker').popover({
    html: true,
    trigger: 'manual'
}).click(function(e) {
    $('.popup-marker').not(this).popover('hide');
    $(this).popover('toggle');
});
$(document).click(function(e) {
    if (!$(e.target).is('.popup-marker, .popover-title, .popover-content')) {
        $('.popup-marker').popover('hide');
    }
});

UPDATE: This code works with Bootstrap 3 as well!

great use of $.not!

Best solution!!!! Thanks a lot!!!!

if (!$(e.target).is('.popup-marker') && !$(e.target).parents('.popover').length > 0)

javascript - How can I close a Twitter Bootstrap popover with a click ...

javascript jquery twitter-bootstrap
Rectangle 27 6

Here's a follow up to the excellent suggestion from Varun Singh which prevents the "flicker" issue of the validation constantly trying to "show" even though the popup is already present. I've simply added an error states array to capture which elements are showing errors and which aren't. Works like a charm!

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

This was the only answer on this page that worked for me. Shame it's not been voted up more.

popover

How to use Twitter Bootstrap popovers for jQuery validation notificati...

jquery validation twitter-bootstrap popover
Rectangle 27 11

This issue on the bootstrap github repo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
/*CSS */
.myClass{ position: relative;}
$(function(){
  $('.myClass').popover({placement: 'in top'});
});

Works for me! Tested on Chrome and Firefox. However I got some inconsistencies with how the content of the popover is displayed, as fat warns in one of the issue's comment

great, this works for me, thanks - this is almost as neat as built in:)

If you're looking for a good alternative to bootstrap's popover that includes more customization, check out stevenbenner.github.com/jquery-powertip

javascript - How can I hold Twitter Bootstrap Popover open until my mo...

javascript jquery twitter-bootstrap twitter-bootstrap-3 popover
Rectangle 27 11

This issue on the bootstrap github repo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
/*CSS */
.myClass{ position: relative;}
$(function(){
  $('.myClass').popover({placement: 'in top'});
});

Works for me! Tested on Chrome and Firefox. However I got some inconsistencies with how the content of the popover is displayed, as fat warns in one of the issue's comment

great, this works for me, thanks - this is almost as neat as built in:)

If you're looking for a good alternative to bootstrap's popover that includes more customization, check out stevenbenner.github.com/jquery-powertip

javascript - How can I hold Twitter Bootstrap Popover open until my mo...

javascript jquery twitter-bootstrap twitter-bootstrap-3 popover
Rectangle 27 11

This issue on the bootstrap github repo deals with this problem. fat pointed out the experimental "in top/bottom/left/right" placement. It works, pretty well, but you have to make sure the popover trigger is not positioned statically with css. Otherwise the popover won't appear where you want it to.

<span class="myClass" data-content="lorem ipsum content" data-original-title="pop-title">Hover me to show a popover.</span>
/*CSS */
.myClass{ position: relative;}
$(function(){
  $('.myClass').popover({placement: 'in top'});
});

Works for me! Tested on Chrome and Firefox. However I got some inconsistencies with how the content of the popover is displayed, as fat warns in one of the issue's comment

great, this works for me, thanks - this is almost as neat as built in:)

If you're looking for a good alternative to bootstrap's popover that includes more customization, check out stevenbenner.github.com/jquery-powertip

javascript - How can I hold Twitter Bootstrap Popover open until my mo...

javascript jquery twitter-bootstrap twitter-bootstrap-3 popover
Rectangle 27 2

You can also use event bubbling to remove the popup from the DOM. It is a bit dirty, but works fine.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

In your html add the .popover-close class to the content inside the popover that should close the popover.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 2

You can also use event bubbling to remove the popup from the DOM. It is a bit dirty, but works fine.

$('body').on('click touchstart', '.popover-close', function(e) {
  return $(this).parents('.popover').remove();
});

In your html add the .popover-close class to the content inside the popover that should close the popover.

How to dismiss a Twitter Bootstrap popover by clicking outside? - Stac...

twitter-bootstrap popover
Rectangle 27 2

For some reason none of the other solutions here worked for me. However, after a lot of troubleshooting, I finally arrived at this method which works perfectly (for me at least).

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

In my case I was adding a popover to a table and absolutely positioning it above/below the td that was clicked. The table selection was handled by jQuery-UI Selectable so I'm not sure if that was interfering. However whenever I clicked inside the popover my click handler which targeted $('.popover') never worked and the event handling was always delegated to the $(html) click handler. I'm fairly new to JS so perhaps I'm just missing something?

BTW I'm not sure if it matters, but I used this method for Bootstrap 2. I assume it will work for Bootstrap 3, but have not confirmed.

javascript - How can I close a Twitter Bootstrap popover with a click ...

javascript jquery twitter-bootstrap
Rectangle 27 2

For some reason none of the other solutions here worked for me. However, after a lot of troubleshooting, I finally arrived at this method which works perfectly (for me at least).

$('html').click(function(e) {
  if( !$(e.target).parents().hasClass('popover') ) {
    $('#popover_parent').popover('destroy');
  }
});

In my case I was adding a popover to a table and absolutely positioning it above/below the td that was clicked. The table selection was handled by jQuery-UI Selectable so I'm not sure if that was interfering. However whenever I clicked inside the popover my click handler which targeted $('.popover') never worked and the event handling was always delegated to the $(html) click handler. I'm fairly new to JS so perhaps I'm just missing something?

BTW I'm not sure if it matters, but I used this method for Bootstrap 2. I assume it will work for Bootstrap 3, but have not confirmed.

javascript - How can I close a Twitter Bootstrap popover with a click ...

javascript jquery twitter-bootstrap
Rectangle 27 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.

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

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.

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?

$(this).popover('show');
$(this).popover('toggle');

I think it's the perfect and best solution. Simple and precise (y)

javascript - Is there a way to close a Twitter Bootstrap popover on cl...

javascript jquery twitter-bootstrap
Rectangle 27 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.

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

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.

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?

$(this).popover('show');
$(this).popover('toggle');

I think it's the perfect and best solution. Simple and precise (y)

javascript - Is there a way to close a Twitter Bootstrap popover on cl...

javascript jquery twitter-bootstrap
Rectangle 27 1

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

javascript - Is there a way to close a Twitter Bootstrap popover on cl...

javascript jquery twitter-bootstrap
Rectangle 27 1

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

javascript - Is there a way to close a Twitter Bootstrap popover on cl...

javascript jquery twitter-bootstrap
Rectangle 27 0

$(this).popover({
    title: node.name,
    html: true,
    container: 'body',
    placement: 'right',
    delay: {"hide": 200} // as per the docs. Should require the quotation marks.... Try without if not hehe....
});

Twitter bootstrap popover : How can I make the transition faster on po...

twitter-bootstrap bootstrap-popover