Tippy.js event delegation - decide interactively when to show tooltip based on target

Question

Say that I want Tippy.js to work on all div elements whose text says "hover" (my actual desired logic is a bit more complex). Here's my failed attempt at doing so:

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

https://jsfiddle.net/wz1drsem/

I can decide to return false in onShow, but I don't know how to access the target element in this callback. If I could, I'd check the target div's text and decide what to return.

There's the onTrigger callback which provides access to the DOM event (e.g. mouseenter), but it doesn't allow to cancel the event.

Answer 1

I found the following solution:

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/