instance.show 在页面加载 5 秒后尝试显示 tippy.js 时不是函数错误

Question

我正在使用 tippyJS 在悬停时显示文本弹出窗口，但我也想在页面加载 5 秒后显示此弹出窗口，所以我这样做了：

const instance = tippy('.tooltippy', {
    trigger: 'mouseenter',
    allowHTML: true,
    placement: 'left',
    animation: 'scale-subtle',
    interactive: true,
    content: function (reference) {
        return reference.querySelector('.tooltipcontent');
    }
});

setTimeout(function() {
  instance.show();
}, 5000);

但 5 秒后我得到：

Uncaught TypeError: instance.show is not a function

虽然我的 tippyjs 工作正常。

我的html：

<span class="whatsappicon tooltippy" title="Chat met ons!">
  <span class="whaplabel tooltipcontent">Stel je vraag!</span>
  <a href="url" target="_blank">
    <img src="images/custom/whatsapp_online.png" alt="Open Whatsapp">
  </a>
</span>

如何在 5 秒后打开这个 tippy？

Answer 1

更新了我的问题，因为我没有看到您将它直接分配给了 HTMLCollection。 Tippy需要绑定到NodeList或者Element类型，所以我们需要先获取元素并赋值给它。

这个例子应该有效：

const tooltippy = document.getElementById('tooltippy')

const instance = tippy(tooltippy, {
    trigger: 'mouseenter',
    allowHTML: true,
    placement: 'left',
    animation: 'scale-subtle',
    interactive: true,
    content: function (reference) {
        return reference.querySelector('.tooltipcontent');
    }
});

setTimeout(function() {
  instance.show();
}, 5000);

<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<span class="whatsappicon" id="tooltippy" title="Chat met ons!">
  <span class="whaplabel tooltipcontent">Stel je vraag!</span>
  <a href="url" target="_blank">
    <img src="images/custom/whatsapp_online.png" alt="Open Whatsapp">
  </a>
</span>

instance.show 在页面加载 5 秒后尝试显示 tippy.js 时不是函数错误

instance.show is not a function error when trying to display tippy.js after 5 seconds on pageload

html

javascript

jquery

tippyjs