显示另一个弹出窗口时如何隐藏 Bootstrap 3 弹出窗口？

Question

我在标签悬停时使用工具提示，但这不能在移动设备上使用，因此我决定使用点击时弹出框（移动设备的 touchstart）而不是桌面工具提示。这个技巧我在这里找到的：https://codepen.io/sharperwebdev/pen/mJYRNN

我稍微更改了我的代码，因为我希望当用户点击标签时，弹出框只会显示 1 秒。 问题是这不能完美地工作。因为当用户点击同一个标签或快速点击多个标签时会出现一些延迟问题。

我还尝试在显示新弹出框时隐藏所有其他弹出框，但它不起作用。
函数.popover('hide') 对我不起作用。所以我忘记了。

这是我的代码：

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

您可以在这里查看结果：https://codepen.io/cutis/pen/qMYrOq

Answer 1

如果您想手动隐藏和显示弹出框，请在弹出框配置中设置“触发器：手动”。

除此之外，没有理由单独淡出弹出框，正确调用 hide() 应该自己做到这一点。

这是一个工作示例：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);
  });  
})

Answer 2

使用data-trigger="focus" 并添加click 事件和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>