更新/刷新页面后引导工具提示将不起作用

Question

由于某些原因，我的工具提示组件无法正常工作。我认为这与选项属性有关，但不确定在哪里可以修复它。我通过以下操作初始化了工具提示组件：

var options = {
animation: true,
container: "body",
placement: "bottom",
trigger: "hover focus",
};

const tooltipTriggerList = document.querySelectorAll(
'[data-bs-toggle="tooltip"]'
);
const tooltipList = [...tooltipTriggerList].map(
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl, options)
);

这是HTML部分：

return (
<>
<div
className="card, StanderdizedBox rounded"
style={{ background: "white", margin: "10px" }}
>
<button
type="button"
className="btn btn-secondary"
data-bs-toggle="tooltip"
data-bs-custom-class="custom-tooltip"
data-bs-title="Search users and chats."
>
Search
</button>
</div>
</>
);

当我进行一些更改时，例如，删除"；选项"；在"；tooltipTriggerEl"；，只要我不刷新网页，工具提示就会起作用。

编辑：刚刚发现我的"选项"；属性不能正常工作。

Answer 1

在SolidJS中也有类似的问题(类似于react(
我找到的唯一解决方案是绑定一个onMouseOver事件，并为每次悬停创建一个工具提示，并在其上调用show方法。

<div class="col-3" onMouseOver={
(e) => {
$(e.target).tooltip({
html: true,
title: `Tooltip text`
});
$(e.target).tooltip('show');
}
}>
Some Text
</div>