带有 Html 属性的工具提示 Bootstrap 5 - HTML

Bootstrap 5 是目前最流行的前端框架之一，它可以大大加速开发者的开发速度。其中一个非常实用的功能就是工具提示。

在新版本的 Bootstrap 5 中，你可以给工具提示设置 HTML 属性，这意味着你可以在工具提示中轻松添加 HTML 内容，而不仅仅是纯文本。

如何使用带有 Html 属性的工具提示

要使用带有 Html 属性的工具提示，你需要使用以下 HTML 代码：

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<strong>这是一段 <em>HTML</em> 片段</strong>">带有 HTML 属性的工具提示</button>

在这个例子中，按钮中的 data-bs-html="true" 属性允许我们在工具提示中使用 HTML 标记。

接下来，我们将通过 JavaScript 启用工具提示：

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

这段代码会遍历所有带有 data-bs-toggle="tooltip" 属性的元素，并启用工具提示。请确保在启用工具提示之前导入 Bootstrap 的 JavaScript 文件。

如何在工具提示中添加 HTML 内容

在前面的代码中，我们可以看到 title 属性包含了一段 HTML 代码，这段代码将作为工具提示的内容。你可以在其中添加任何你想要的 HTML 标记，例如 <strong> 或 <em>。

总结

带有 Html 属性的工具提示是一个非常有用的功能，它让你能够在工具提示内容中添加 HTML 内容，提高了工具提示的灵活性。如果你正在使用 Bootstrap 5，那么这是一个你不应该错过的功能。