2

我需要将显示和隐藏属性的不同值延迟传递给弹出框，并且我需要一个 HTML 属性解决方案。我已经测试了这段代码，它可以在 data-delay 属性中传递一个字符串。我正在使用引导程序 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 属性为显示和隐藏延迟传递不同的值？

提前致谢！

4

3 回答 3

1

您可以使用该data-delay属性，但是这将设置“显示”和“隐藏”时间延迟。如果您希望单独设置它们，则需要配置 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>

于 2020-02-12T14:59:00.023 回答
0

您可以传递一个数字或一个对象。因此，您可以像这样指定“显示”和“隐藏”延迟：

<span 
    data-toggle="popover" 
    data-delay="{'show':0, 'hide':200}" 
    data-trigger="hover" 
    data-html="true" 
    data-content="content of my popover"
>
    TEST
</span>
于 2021-02-18T08:44:03.817 回答
0

对于 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属性。

于 2021-10-28T19:32:48.530 回答