0

after I created the popovers I am calling the tippy() constructor like: tippy('.my-tippy-popover', { ... }); But this is creating all existing tippy popovers again. So if you have 80 popovers and you add a new one, then the tippy() constructor is creating 81 new popovers. And if you click one of the popovers you get 2x the event e.g. onShow. If you add now again a new popover and run tippy() constructor and click after that a popover, you get 3x onShow event. And so on. So it's adding more and more event listeners. How can I avoid that? Edit 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()
}
Luz
  • 11
  • 3
  • Can you please share some code? How are you adding the popovers? how are you using tippy after adding the popovers? – Carlos Roso Jul 24 '20 at 22:04
  • @CarlosRoso Hi, sure. I added a link to the code. The popovers are not showing, but you can see it in the browser console. Simply click some times on Add New Popover and then click on a Popover. – Luz Jul 24 '20 at 23:25

0 Answers0