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 (item.lastChild.nodeName == "DIV") {return false}
},
});