为什么 Bootstrap5 工具提示在其他 BS5 组件中不起作用？

Question

所以我正在尝试使用 BS5 中的工具提示组件。但不知何故它不起作用。让我先向您展示 html 代码。

<div class="row">
    <div class="col-12 col-md-4">
        <a class="card">
            <div class="card-body">
                <div class="card-title">this is title.&nbsp;<span class="badge badge-theme" data-bs-toggle="tooltip" data-bs-placement="top" title="this is tooltip">Origiinal content</span></div>
            </div>
        </a>
    </div>
</div>

奇怪的是，当我将工具提示放在卡片组件之外时，工具提示可以正常工作。问题是什么？提前致谢。 :)

Answer 1

这是整个卡片上工具提示的工作示例： Working demo

在我的演示中将 id="example" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" 放在任何元素上都会导致工具提示出现在该元素上。在这种情况下，我将它放在 div 和 class .card 上。

随意将 ID 名称从 example 更改为您想要的 ID（在 script.js 和 index.html 中）。

为什么 Bootstrap5 工具提示在其他 BS5 组件中不起作用？

Why doesn't Bootstrap5 tooltip work in other BS5 component?

bootstrap-5