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

Question

我正在尝试通过以下命令将icons的工具提示背景色更改为alert-danger为红色，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 link上找到了此解决方案。

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

我该如何解决此问题？

编辑

我的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;
}

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

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/[email protected]/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>