The problem of changing the tippy text via jq

Question

Sorry to bother you. I use Tippy.js v6.3.7 and there was a problem There is a "div" element with "data-tippy-content="Save"". By means of JQ, I change to the text "Delete", but when hovering, the hints are covered on top of each other. I need only a new "Delete" label to appear. Please help me to sort out the problem, all cookies

        $.each(array, function(index, val) {
            var element_ = '.js-btn[data-id="' + val +'"]';
            $(element_).removeAttr("data-tippy-content");
            tippy(element_, {
                content: 'Delete',
            });
        });

Abbreviated version - https://codepen.io/yotavet814/pen/JjawZGd

Instance.destroy() instance method doesn't work, but other instance methods do https://atomiks.github.io/tippyjs/v6/methods/#destroy

Answer 1

You can try something like this. You can get instance by appending ._tippy to the element. And then you can use any instance method like setContent etc

const btn = document.querySelector(".btn");
  
tippy('[data-tippy-content]', {
        duration: [95, 95],
        theme: 'user',
        allowHTML: true,
        animation: 'scale',
        dynamicTitle: true,
});

const instance= btn._tippy;

instance.setContent("Delete");

Codepen