javascripttippyjs

Change Tippy content of delegate instance

I'm using the Tippy.js v6 library, and I'm struggling to work out how to change the content of any one of my instances using the delegate method. All the answers I've found on SO reference methods that are no longer available in v6.

I'm using v6 via the CDN.

Current delegate code

// Delegate tippy
const delegateInstances = tippy.delegate("#order__lines-table", {
  target: "[data-tippy-content]"
});

If I console.log(delegateInstances) this I get an array with my items, but I can't seem to work out how to target 1 single instance inside here.

An example of what I'm doing is when you click a button its state toggles and I want the tippy content to update. I had done this like follows, but they just stack on top of each other, the old content doesn't get removed.

const viewBtnIcon = viewBtn.querySelector('i');
viewBtnIcon.dataset.tippyContent = `View ${data.name}`;
tippy(viewBtnIcon, {
  content: `View ${data.name}`
});

Basically I need to know how to target a specific instance and update the content. I have to use the delegate method (from what I understand) as content is dynamically added to the page.

Solution

  • The following code is how I got it to work based on issue #767 and issue #774 on the original GitHub repo

    const viewBtnIcon = viewBtn.querySelector('i');
if (viewBtnIcon._tippy) {
    viewBtnIcon._tippy.setContent(`View ${data.name}`);
} else {
    viewBtnIcon.dataset.tippyContent = `View ${data.name}`;
}