What's the best way to re-initialize tippy and possibly only do it for elements that don't already have a tippy instance, or to target a specific tippy instance and replace it? When I try to target an instance and destroy it, nothing gets destroyed, and my new tooltip shows up on top of the other one. I'm on tippy version 6.3.7.
Trying to do this inside of an event listener:
const instance = tippy(document.querySelector('#statement-task-' + taskId + ' .status-change'));
console.log(instance);
instance.destroy();
console.log(instance);
hich produces this:
The destroy method seemingly does nothing.
You can see both tooltips show up on top of each other:
This is the rest of my code, and I'm not sure if I'm doing something wrong in here. Open to feedback:
document.addEventListener('DOMContentLoaded', function() {
initializeTippy();
});
function initializeTippy() {
tippy.setDefaultProps({
allowHTML: true,
placement: 'top',
arrow: true,
interactive: true,
dynamicTitle: true
});
const template = document.getElementById('status-menu');
const container = document.createElement('div');
container.appendChild(document.importNode(template.content, true));
tippy('.status-change', {
content: container.innerHTML,
theme: 'light',
hideOnClick: 'toggle',
trigger: 'click',
onShown(instance) {
attachStatusChangeListeners(instance);
tippy('[data-tippy-content]');
},
});
const userTemplate = document.getElementById('user-options');
const userMenuContainer = document.createElement('div');
userMenuContainer.appendChild(document.importNode(userTemplate.content, true));
tippy('.user-change', {
content: userMenuContainer.innerHTML,
theme: 'light',
hideOnClick: 'toggle',
trigger: 'click',
onShown(instance) {
attachUserChangeListeners(instance);
tippy('[data-tippy-content]');
},
});
const optionsMenuTemplate = document.getElementById('task-options');
const optionsMenuContainer = document.createElement('div');
optionsMenuContainer.appendChild(document.importNode(optionsMenuTemplate.content, true));
tippy('[class*=options-change]:not(.no-options)', {
content: optionsMenuContainer.innerHTML,
theme: 'light',
hideOnClick: 'toggle',
trigger: 'click',
maxWidth: 'none',
onShown(instance) {
attachOptionMenuListeners(instance);
tippy('[data-tippy-content]');
},
});
tippy('[data-tippy-content]');
}