在页面加载5秒后尝试显示instance.show时，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秒后打开这个小费？

Answer 1

更新了我的问题，因为我没有看到你直接分配给一个HTMLCollection。Tippy需要绑定到NodeList或元素类型，因此我们需要首先获得元素并将其分配给它。

这个例子应该有效：

​

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>

​