使用 Bootstrap 5 创建自定义工具提示

Question

我正在使用 Bootstrap 5 并尝试创建自定义工具提示。我在这里看到了 Bootstrap 5 文档中使用的标记。

Bootstap 5 Tooltips Markup

我收集（并在网上查看）工具提示不在调用元素中并且是兄弟元素。我正在尝试使用带有以下标记的自定义类。

// CSS test option #1
.custom-tooltip + .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

// CSS test option #2
.custom-tooltip ~ .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

<span class="custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="The tooltip text<br/>Extra textC">
    <svg ... ></svg>
</span>

所以如果你只使用.tooltip-inner，显然它可以正常工作，但我不想要一个全局工具提示，需要有不同的自定义工具提示。

Answer 1

（这个需要一些时间来弄清楚，因为规范答案不起作用 --- 这很可能是 JSFiddle 的事情，或者是 BS5 错误.. 不确定。）

记录的方法是将您的自定义类添加到 customClass 选项，如下所示：

<span data-bs-customClass="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

但我无法让它在这个JSFiddle 上工作。这是因为 html 以全部小写的形式呈现 （在 Chrome 上） 并且“customClass”中的“C”呈现“customclass” .. 所以 BS5 JS 永远不会选择它。解决方法是在工具提示初始化程序中传递该选项，如下所示：

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

然后你的 CSS 应该可以正常工作了：

.custom-tooltip.tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

编辑：

事实证明这是固定的......正确的方法是在大写选项之前添加一个连字符“-”并使用小写形式，如下所示：

<span data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

然后初始化程序也应该排除该选项（添加它会覆盖数据属性）。初始化程序是按照文档：

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