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

Question

我正在尝试通过这些命令将带有类alert-danger的icons的工具提示背景颜色更改为红色，将alert-success更改为绿色：

.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 链接上找到了这个解决方案。

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

我该如何解决这个问题？

编辑

我的 HTML 代码如下：

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

Answer 1

在这种情况下，您使用的是+选择器，它将选择相邻的同级。 如果将其更改为~选择器，它将选择任何下一个兄弟姐妹，而不仅仅是下一个（相邻）。 即便如此，它可能对你不起作用。 这取决于您的 HTML 代码的结构和复杂程度。

建议您检查CSS 选择器的工作方式。

我认为更好的解决方案是更改每个工具提示的容器。 默认容器是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;
}

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

Answer 2

如果您只想通过 css 实现，则需要添加此data-container=".alert-success"属性，以便此方法到工具提示 div 将附加到定义.alert-success类部分中。
所以我希望下面的片段会对你有很大帮助。

 $(function () { $('[data-toggle="tooltip"]').tooltip(); });

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <div class="container my-5 text-center"> <div class="row"> <div class="col-sm-12"> <i class="fa fa-times-circle alert-danger" data-container=".alert-danger" data-toggle="tooltip" title="Tooltip Danger"></i> <i class="fa fa-check-circle alert-success" data-container=".alert-success" data-toggle="tooltip" title="Tooltip Success"></i> </div> </div> </div>