javascript - Tippy.js 事件委托 - 根据目标以交互方式决定何时显示工具提示

Question

假设我希望 Tippy.js 处理所有div文本为“悬停”的元素（我实际需要的逻辑要复杂一些）。这是我这样做的失败尝试：

tippy.delegate("body", {
  target: "div",
  content: "tippy",
  onShow: () => {
    //return false;
  }
});

https://jsfiddle.net/wz1drsem/

我可以决定return falsein onShow，但我不知道如何在此回调中访问目标元素。如果可以的话，我会检查目标 div 的文本并决定返回什么。

onTrigger回调提供了对 DOM 事件的访问（例如）mouseenter，但它不允许取消事件。

Answer 1

我找到了以下解决方案：

tippy.delegate("body", {
  target: "div",
  content: "tippy",
  onTrigger: (instance, event) => {
    if (event.target.textContent !== 'hover') {
      instance.disable();
    }
  },
  onUntrigger: (instance, event) => {
    instance.enable();
  },
});

https://jsfiddle.net/wz1drsem/1/