Javascript 引导4更改特定元素的工具提示颜色

我正试图通过以下命令将

图标的工具提示背景色更改为红色，
警报危险
类将其更改为红色，
警报成功
类将其更改为绿色：

.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;
}

我在这上面找到了这个解决方案

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

我如何解决这个问题

编辑

我的HTML代码如下：

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

在本例中，您使用的是
+
选择器，它将选择相邻的兄弟姐妹。如果将其更改为
~
选择器，它将选择任何下一个同级，而不仅仅是下一个（相邻的）。即使如此，它也可能不适合你。这取决于HTML代码的结构和复杂性

建议您检查工作方式

我认为更好的解决方案是更改每个工具提示的容器。默认容器是
body
，这就是为什么要在那里重新定义它。只需在每个图标元素上添加
数据容器
属性：

<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>

如果需要更多的特殊性，可以为每个图标元素指定一个新的类名，并将其用作工具提示的容器。
在这种情况下，您使用的是
+
选择器，它将选择相邻的同级。如果将其更改为
~
选择器，它将选择任何下一个同级，而不仅仅是下一个（相邻的）。即使如此，它也可能不适合你。这取决于HTML代码的结构和复杂性

建议您检查工作方式

我认为更好的解决方案是更改每个工具提示的容器。默认容器是
body
，这就是为什么要在那里重新定义它。只需在每个图标元素上添加
数据容器
属性：

<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实现，则需要添加此数据容器=“.alert success”属性，因此此方法将附加到工具提示div中的define
.alert success
类部分。

所以我希望下面的代码片段能对你们有所帮助


$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
。警告危险。工具提示>。工具提示内部{
背景色：红色；
}
.alert success.tooltip>.tooltip内部{
背景颜色：绿色；
}
.alert danger>.tooltip.bs-tooltip-top.arrow:：before{
边框顶部颜色：红色；
}
.alert success>.tooltip.bs-tooltip-top.arrow:：before{
边框顶部颜色：绿色；
}
如果您只想通过css实现，则需要添加此数据容器=“.alert success”属性，以便将此方法附加到工具提示div中的define
.alert success
类部分。

所以我希望下面的代码片段能对你们有所帮助


$（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）；
});
。警告危险。工具提示>。工具提示内部{
背景色：红色；
}
.alert success.tooltip>.tooltip内部{
背景颜色：绿色；
}
.alert danger>.tooltip.bs-tooltip-top.arrow:：before{
边框顶部颜色：红色；
}
.alert success>.tooltip.bs-tooltip-top.arrow:：before{
边框顶部颜色：绿色；
}

您能提供HTML文件吗？寻求代码帮助的问题必须包含在问题本身中重现所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。请看。我在问题中添加了与问题相关的html，我想您现在可以复制相同的问题。您可以提供html文件吗？寻求代码帮助的问题必须包含在问题本身中复制所需的最短代码，最好是在堆栈片段中。虽然您提供了一个链接，但如果该链接无效，您的问题对其他将来遇到相同问题的用户将毫无价值。看。我在问题中添加了与问题相关的html，我想你现在可以复制同一个问题了。干得好，伙计！它运作顺利。感谢您的详细解决方案！！！干得好，伙计！它运作顺利。感谢您的详细解决方案！！！