javascript - Bootstrap 4 更改特定元素的工具提示颜色

Question

我正在尝试将图标的工具提示背景颜色更改为红色，alert-success类为alert-danger > 通过这些命令变绿:

.alert-danger + .tooltip > .tooltip-inner {
    background-color: red !important;
}
.alert-success + .tooltip > .tooltip-inner {
    background-color: green;
}
.alert-danger + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: red;
}
.alert-success + .tooltip > .tooltip.bs-tooltip-top .arrow::before{
    border-top-color: green;
}

我在这个 StackOverflow link 上找到了这个解决方案.

我面临的问题是，每次我将鼠标悬停在图标上时，Boostrap 代码都会在 body 标记的底部创建一个 div 元素因此我加载的代码无法按预期工作。

如何解决这个问题？

编辑

我的HTML代码如下:

<i class="far fa-check-circle alert-success" data-toggle="tooltip" data-original-title="Sim"></i>

Answer 1

在本例中，您使用的是 + 选择器，它将选择相邻同级。如果将其更改为 ~ 选择器，它将选择任何下一个同级，而不仅仅是下一个(相邻)。即便如此，它可能对你不起作用。这取决于您的 HTML 代码的结构及其复杂程度。

建议您查看CSS selectors工作。

我认为对您来说更好的解决方案是更改每个工具提示的容器。默认容器是 body，这就是它在那里被重新渲染的原因。只需在每个图标元素上添加 data-container 属性即可:

<i
  class="far fa-check-circle alert-success"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-success">
</i>
<i
  class="far fa-check-circle alert-danger"
  data-toggle="tooltip"
  data-original-title="Text"
  data-container=".alert-danger">
</i>

这样，工具提示将呈现在每个图标元素而不是主体内。

因此，您只需根据需要调整 CSS 即可。
现在可以更轻松地选择工具提示。

.danger-tooltip .tooltip .tooltip-inner {
    background-color: red;
}
.success-tooltip .tooltip .tooltip-inner {
    background-color: green;
}
.danger-tooltip .tooltip .arrow::before{
    border-top-color: red;
}
.success-tooltip .tooltip .arrow::before{
    border-top-color: green;
}

如果您需要更多特异性，您可以为每个图标元素指定一个新的类名称，并将其用作工具提示的容器。