时间戳

首页 > 解决方案 > 在页面加载 5 秒后尝试显示tippy.js 时，instance.show 不是函数错误

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

问题描述

我正在使用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 秒后我能做些什么来打开这个小提示？

标签： javascripthtmljquerytippyjs

解决方案

更新了我的问题，因为我没有看到您将它直接分配给 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>

推荐阅读