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 https://getbootstrap.com/docs/3.3/javascript/#popovers添加setTimeout事件的简单方法

$(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>

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

2 个答案: