页面加载5秒后触发tippy.js弹窗报instance.show is not a function如何解决

报错原因 #

tippy('.tooltippy')使用选择器字符串初始化时，无论匹配到多少个元素，返回值都是 tippy实例数组，而非单个实例。你直接对数组调用show()方法，就会抛出show is not a function的类型错误。

解决方案 #

方案1：直接取第一个实例（页面仅1个.tooltippy元素时适用）

仅修改定时器部分的代码，从返回的实例数组中取出第一个实例调用show()即可：

setTimeout(function() {
  // 增加判空逻辑避免异常
  if(instance && instance.length) instance[0].show();
}, 5000);

方案2：单个DOM元素初始化（更稳妥）

直接选中单个DOM节点初始化tippy，返回值就是单个实例，不会出现数组相关问题，同时新增DOM加载完成的监听逻辑，避免元素未渲染就初始化的异常：

document.addEventListener('DOMContentLoaded', function() {
  const instance = tippy(document.querySelector('.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秒后自动弹出弹窗的需求。

内容的提问来源于stack exchange，提问作者twan