Popover Bootstrap 通过 HTML 属性传递延迟显示和隐藏值

Question

我需要将显示和隐藏属性的不同延迟值传递给弹出窗口，并且我需要一个 HTML 属性解决方案。我已经测试了这段代码，它可以在 data-delay 属性中传递一个字符串。我正在使用 Bootstrap 3.

<span style="white-space: nowrap;" data-toggle="popover" data-delay="1000" data-trigger="hover" data-html="true" data-content="content of my popover>

如何使用 HTML 属性为显示和隐藏延迟传递不同的值？

提前致谢！

Answer 1

您可以使用 data-delay 属性，但这会同时设置 'show' 和 'hide' 时间延迟。如果您希望单独设置它们，则需要 configure the popover。使用 jQuery 您可以轻松地做到这一点：

$(function() {
  // This will enable and configure all popovers present in the page
  $('[data-toggle="popover"]').popover({
    delay: {
      "show": 500,
      "hide": 100
    }
  })
})

.container {
  padding-top: 40px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <a tabindex="0" class="btn btn-lg btn-success" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">click me</a>
</div>

Answer 2

您可以传递数字或对象。因此，您可以像这样指定 'show' 和 'hide' 延迟：

<span 
    data-toggle="popover" 
    data-delay="{'show':0, 'hide':200}" 
    data-trigger="hover" 
    data-html="true" 
    data-content="content of my popover"
>
    TEST
</span>

Answer 3

对于Bootstrap v5，你可以这样实例化它：

document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
  if (el.hasAttribute('data-bs-delay-show')) {
    return new Tooltip(el, {
      delay: {
        show: el.getAttribute('data-bs-delay-show'),
        hide: el.getAttribute('data-bs-delay-hide') || 0,
      },
    });
  }
  return new Tooltip(el);
});

然后在元素上使用 data-bs-delay-show 和 data-bs-delay-hide 属性。

Popover Bootstrap 通过 HTML 属性传递延迟显示和隐藏值

Popover Bootstrap pass delay show and hide values by HTML attributte

html

twitter-bootstrap-3