更改委托实例的 Tippy 内容

Question

我正在使用 Tippy.js v6 库，我正在努力研究如何使用委托方法更改我的任何一个实例的内容。我在 SO 参考方法上找到的所有答案在 v6 中不再可用。

我正在通过 CDN 使用 v6。

当前委托代码

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

如果我 console.log(delegateInstances) 这个我得到一个包含我的项目的数组，但我似乎无法弄清楚如何在此处定位 1 个单个实例。

我正在做的一个例子是，当您单击一个按钮时，它的状态会切换，我希望更新内容。我是这样做的，如下所示，但它们只是堆叠在一起，旧内容不会被删除。

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

基本上我需要知道如何定位特定实例并更新内容。我必须使用委托方法（根据我的理解），因为内容是动态添加到页面的。

Answer 1

下面的代码是我如何根据原始 GitHub 仓库

上的 issue #767 and issue #774 让它工作的

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

更改委托实例的 Tippy 内容

Change Tippy content of delegate instance

javascript

tippyjs