javascript - 更新工具提示内容不会更新，因为它已经初始化？

Question

我不确定我是否在这里获得了标题，如果有人可以推荐一个更好的标题，我会很乐意更改它。

我的网站显示了您可以购买的产品列表，并带有一个快速的“添加到愿望清单”按钮。当您将鼠标悬停在按钮上时，工具提示会显示“添加到愿望清单”，当您单击按钮时，该项目将添加到愿望清单中。问题是，既然该项目在愿望清单中，将鼠标悬停在按钮上应该说“从愿望清单中删除”，但它仍然显示“添加到购物篮”。我正在尝试更新此内容。

我的显示图标的代码是这样的，使用data属性。

<div class="wishlist-status js-wishlist-icon"  data-tippy-content="@Html.Translate("ADD TO WISHLIST",Context)">
    <partial name="~/Views/Shared/Components/SVG/_IconHeart.cshtml" />
</div>

我有一个控制此功能的功能。我的想法是我更新这个数据值，它会起作用。所以我做了这个

var el = document.querySelector('.js-wishlist-icon');
el.setAttribute('data-tippy-content', 'remove from basket');

它确实有效。如果我检查元素，一旦我单击按钮，它的值就会在标记中显示“从篮子中删除”，只是工具提示没有这么说。悬停时它仍然显示添加到愿望清单。我认为这是因为它在初始化时设置，但我似乎无法更新它。

我想我需要一个“updateTooltip”功能。我认为这个网站是使用 Bootstrap 构建的，但我不知道这个功能是否是 Bootstrap。我试过查看https://getbootstrap.com/docs/4.0/components/tooltips/但我不相信那里的任何东西都会帮助我。

有没有人有任何想法？谢谢