CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3popoverbootstrap-popover
Cutis
Cutis

Reputation: 980

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

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

Upvotes: 1

Views: 1739

Answers (2)

Robert Purcea
Robert Purcea

Reputation: 281

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

Upvotes: 2

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

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>

Upvotes: 0

Related Questions