Situation: I have a div with a Tippy attached to it, and inside the DIV there are highlighted spans with their own tooltips. They all use click as triggers.

Ideal behavior: When I click on a highlight, only the highlight Tippy should show.

Current behavior: Both tooltips show at the same time.

I can catch the click with onTrigger, using event.target. However, return false or instance.hide() do not prevent it from showing. Is there a way I can do that with onTrigger?

tippy(divEl, {
    content: 'Tooltip!',
    allowHTML: true,
    onTrigger(instance, event) {
        if (event.target.className == 'highlight') {
            console.log('It should hide the tooltip!');
            instance.hide();
            return false;
        }
    },
    arrow: true,
    interactive: true,
    trigger: 'click',
    theme: 'light-border',
    zIndex: 9999
  });
}

I got it working with the following trick, but it wouldn't work if I had other DIVs inside the main DIV:

tippy(divEl, { ...,

  onShow(instance) {
    if (divEl.lastChild.nodeName == "DIV") {return false}
  },
});