引导5的工具提示数据-bs-标题不可视化更新，但显示在检查元素中的更新。

Question

我有以下JavaScript函数：

expandCollapse() {
if (this.collapseButtonIconTarget.classList.contains("bi-chevron-compact-down")) {
  this.collapseButtonIconTarget.classList.remove("bi-chevron-compact-down")
  this.collapseButtonIconTarget.classList.add("bi-chevron-compact-up")
  this.collapseButtonIconTarget.setAttribute("data-bs-title", "Expand")
} else {
  this.collapseButtonIconTarget.classList.remove("bi-chevron-compact-up")
  this.collapseButtonIconTarget.classList.add("bi-chevron-compact-down")
  this.collapseButtonIconTarget.setAttribute("data-bs-title", "Collapse")
}

}

单击“折叠/展开”按钮时触发：

%button.btn.btn-dark{type: "button", data:{action: "click->uploads#expandCollapse", bs:{toggle: "collapse", target:"#uploadsList"}}}
  %i.bi.bi-chevron-compact-up{data:{uploads_target: "collapseButtonIcon", bs:{toggle: "tooltip", placement: "top", title: "Expand"}}}

在视觉上，当我点击按钮时，工具提示“展开”不会被更新。所以我正确地点击了它，并选择了Inspect元素来检查DOM。然后我点击并观察元素的数据-bs-title属性的变化。

所以不知道如何让它更新文档本身。代码的图标部分按预期工作。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })

我在下面的答案中添加了初始化代码，我的评论想知道当工具提示发生变化时是否需要添加事件侦听器。

更新

为上下文提供一些截图。我把它从data-bs-title切换到元素的简单标题，用于这些屏幕截图。

Title属性的工具提示显然是除了引导标题工具提示之外显示的，所以我将返回到data-bs-title。但是，这些截图说明：

标题属性是通过JavaScript更新的，但是引导程序的标题不是。

​

​

​

​

Answer 1

对于引导工具提示，您可以在某个时候将该元素初始化为工具提示，通常人们会将此代码放入页面加载中，并在向页面中添加新的工具提示内容之后。因此，引导程序的代码是用当时存在的工具提示设置的。我不知道引导程序是否有另一种方法，您可以运行它来更新工具提示(可能)，或者您可以从元素中删除工具提示，然后再重新添加它，但是通常在这种情况下，我看到人们只是将“展开/折叠”作为工具提示，然后离开它。