Bootstrap 4 изменить цвет всплывающей подсказки для указанного элемента c

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

I ' мы нашли это решение по этой ссылке StackOverflow .

Проблема, с которой я сталкиваюсь, заключается в том, что каждый раз, когда я наводю указатель мыши на значок, код Boostrap создает элемент div в в нижней части тега body, чтобы загружаемый код не работал должным образом.

Как решить эту проблему?

Редактировать

Мой HTML код выглядит следующим образом:

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

Answer 1

Если вы хотите достичь только с помощью 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>

Answer 2

В этом случае вы используете селектор +, который выберет соседний брат . Если вы измените его на селектор ~, он выберет любого следующего брата, а не только следующего (смежного). Тем не менее, это может не сработать для вас. Это зависит от того, как структурирован ваш код 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;
}

Если вам нужна конкретность, вы можете дать новое имя класса для каждого элемента значка и использовать его как контейнер для всплывающей подсказки.