javascript - 是否可以仅在最新添加的弹出框上调用tippy（js）构造函数？

Question

创建弹出框后，我调用了tippy() 构造函数，例如：tippy('.my-tippy-popover', { ... }); 但这又再次创建了所有现有的tippy popovers。因此，如果您有 80 个弹出框并添加了一个新弹出框，则 tippy() 构造函数将创建 81 个新弹出框。如果您单击其中一个弹出窗口，您将获得 2 倍的事件，例如 onShow。如果您现在再次添加一个新的弹出框并运行tippy() 构造函数并在弹出框之后单击，您将获得3x onShow 事件。等等。所以它添加了越来越多的事件监听器。我怎样才能避免这种情况？编辑jsfiddle

jQuery(($) => {
runTippy()
})

function runTippy() {
tippy('.my-tippy-popover', {
    content(reference) {
        const id = reference.getAttribute('data-template');
        const template = document.getElementById(id);
        return template.innerHTML;
    },

    onHide(instance) {
        console.log('+++ tippy onHide +++')
    },
    onCreate(instance) {
        console.log('+++ tippy onCreate +++')
    },
    onShow(instance) {
        console.log('+++ tippy onShow +++')
    },
    onShown(instance) {
        console.log('+++ tippy onShown +++')
    },
    allowHTML: true,
    trigger: 'click',
    appendTo: document.getElementById('tippy-container'),
    interactive: true,
    interactiveBorder: 10,
    interactiveDebounce: 35,
    maxWidth: 'none',
    });
}

function addPopover() {
const body = $('body');
body.append(`<span class="my-tippy-popover" data-template="tippyContent" >Popover</span><br>`);
runTippy()
}