Tippy.js v6中popperInstance始终为null问题求助

在Tippy v6中，popperInstance不再直接挂载在tippy实例的顶级属性上，且它的创建时机发生了变化——只有当tooltip首次渲染或挂载时才会初始化popper实例，这就是你直接访问instance.popperInstance得到null的核心原因。结合Cytoscape tooltip的使用场景，你可以按以下方式修改代码：

1. 通过onCreate或onMount回调获取Popper实例 #

在创建tippy实例时，添加生命周期回调捕获popperInstance，可将其存储到DOM元素或变量中供后续使用：

cy.on('mouseover', 'node', (evt) => {
  const nodeElement = evt.target[0];
  const tippyInstance = tippy(nodeElement, {
    content: '你的Tooltip内容',
    // 在实例创建时获取popperInstance
    onCreate(instance) {
      // 把popper实例绑定到节点元素上，方便后续调用
      nodeElement._popperInstance = instance.popperInstance;
    },
    // 如果需要在tooltip显示后立即更新位置（适配Cytoscape节点位置）
    onMount(instance) {
      instance.popperInstance.update();
    }
  });
});

2. 动态更新Tooltip位置 #

如果需要在Cytoscape节点移动后更新tooltip位置，直接调用之前存储的popper实例的update()方法即可：

// 假设你已经通过回调将popperInstance存在了nodeElement上
nodeElement._popperInstance.update();

关键差异说明 #

• Tippy v5中popperInstance在tippy实例创建后即可直接访问，但v6中它是延迟初始化的，只有在tooltip被渲染后才会生成。
• 不再支持直接通过tippyInstance.popperInstance访问，必须通过onCreate/onMount这类生命周期回调获取实例引用。

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