How to hide Bootstrap 3 popover when another popover is shown?

Question

I am using tooltip on label hover but this cannot work on mobile, so I decide to use popover on click (touchstart for mobile) instead of tooltips on desktop. This trick I found it here: https://codepen.io/sharperwebdev/pen/mJYRNN

I change my code a little bit because I want when user clicks on label, the popover will be shown only for 1 second. The problem is this is not working perfectly. Because there are some delay issues when user clicks on the same label or clicks quickly on several labels.

I try also to hide all other popovers when a new one is shown but it does not work.
The function .popover('hide') is not working for me. So I forget it.

Here is my code:

$( function () {
  var toolBox = $('[data-toggle="tooltip"]'); 
  toolBox.popover({
    template: '<div class="popover ps-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'              
  }).on('click touchstart', function(e) {
  setTimeout(function() {
   $('[data-toggle="tooltip"]').popover('hide');  $('.ps-popover').fadeOut('slow');     //hide popover after 1s
  }, 1000);
  });
})

You can check here for results: https://codepen.io/cutis/pen/qMYrOq

I want when user clicks on label, the popover will be shown only for 1 second. The problem is this is not working perfectly. Some delay issues when user clicks on the same label or clicks quickly on several labels. Or sometimes, user needs to click twice before seeing the popover — Cutis, Sep 12 '18 at 15:02
Check this: https://codepen.io/cutis/pen/qMYrOq . when you click the first time it works. but after, you need to click twice before it works — Cutis, Sep 12 '18 at 15:17

score 2 · Answer 1 · edited Sep 13 '18 at 02:32

2

If you want to manually hide and show the popover, set "trigger: manual" in your popover configuration.

Aside from that, there is no reason to separately fade out the popover, calling hide() correctly is supposed to do that itself.

Here is a working example: https://codepen.io/anon/pen/XPqgQr?editors=1011.

$( function () {

  var allTextsWithTooltip = $('[data-toggle="tooltip"]'); 

  allTextsWithTooltip.popover({
    template: '<div class="popover ps-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
    trigger: "manual"
  }).on('click touchstart', function(e) {
    $(this).popover('show');

    setTimeout(() => {
      $(this).popover('hide'); 
    }, 1000);
  });  
})

edited Sep 13 '18 at 02:32

Pang

9,564
146
81
122

answered Sep 12 '18 at 16:17

Robert Purcea

281
1
5

Yes it seems to work but in my project, I cannot make "popover('hide') " work. I think it is something due to Jquery prototype and variable scope but I do not know how to explain well. I check this https://stackoverflow.com/questions/17968951/bootstrap-popovershow-popoverhide-not-working-binding-it-to-click-wo but I cannot make popover('hide') work. I will come back when I will success to reproduce bug on codepen project. – Cutis Sep 13 '18 at 14:42
Finally I use ** $('.ps-popover').remove(); ** I find this trick here: https://stackoverflow.com/questions/21190385/bootstrap-popover-show-destroy-not-working-properly/21191859 . But I want really to understand, why I get this bug. Due to professional reasons unfortunately, I cannot not share all my code. and I cannot reproduce the bug either. Thanks for help anyway! – Cutis Sep 13 '18 at 16:07

Jagjeet Singh · Answer 2 · 2018-09-12T16:42:14.107

Simplest way to achieve this by using data-trigger="focus" and add click event with setTimeout https://getbootstrap.com/docs/3.3/javascript/#popovers

$(function () {
  var timeout;
  $('[data-toggle="popover"]').popover().click(function () {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
        $('[data-toggle="popover"]').popover('hide');
    }, 1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-trigger="focus" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

that works but it does not actually make pop-ups disappear after 1 second, which is what the OP was looking for — Robert Purcea, Sep 12 '18 at 16:29
.popover('hide') is not working for me. Finally I use this trick ".remove()" from native jquery https://stackoverflow.com/questions/21190385/bootstrap-popover-show-destroy-not-working-properly/21191859 . thanks anyway — Cutis, Sep 13 '18 at 16:09

How to hide Bootstrap 3 popover when another popover is shown?

2 Answers2