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

Question

我在标签悬停上使用工具提示，但这在移动设备上不起作用，所以我决定在点击时使用弹出窗口(移动设备的触摸启动)而不是桌面上的工具提示。我在这里找到了这个技巧: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

如果您想手动隐藏和显示弹出框，请在弹出框配置中设置“trigger: manual”。

除此之外，没有理由单独淡出弹出框，正确调用 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);
  });  
})