Разный цвет для двух всплывающих подсказок только с CSS

Question

У меня есть 2 подсказки.Один должен быть зеленым, а другой - красным.Я искал, как это сделать, но либо оба становятся зелеными, либо оба становятся красными.

$('.fa-edit').tooltip();
$('.fa-trash-alt').tooltip();

.tooltip-inner {
  background-color: #8ABE57 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip .arrow:before {
  border-bottom-color: #8ABE57 !important;
  border-top-color: #8ABE57 !important;
}

.tooltip.show {
  opacity: 1 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">



<div class="col-2 actions-edit"><i class="far fa-edit" data-toggle="tooltip" data-placement="top" title="Editar"></i></div>
<div class="col-2 actions-trash"><i class="far fa-trash-alt" data-toggle="tooltip" data-placement="top" title="Eliminar"></i></div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 1

Добавьте пользовательский класс для нужной подсказки красным цветом.И написать несколько CSS для того же.Вот рабочий пример.

$('.fa-edit').tooltip();
$('.fa-trash-alt').data('tooltip-custom-class', 'tooltip-danger').tooltip();

$(document).on('inserted.bs.tooltip', function(e) {
    var tooltip = $(e.target).data('bs.tooltip');
    $(tooltip.tip).addClass($(e.target).data('tooltip-custom-class'));
});

.tooltip-inner {
  background-color: #8ABE57 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip .arrow:before {
  border-bottom-color: #8ABE57 !important;
  border-top-color: #8ABE57 !important;
}

.tooltip.show {
  opacity: 1 !important;
}

.tooltip-danger .tooltip-inner {
  background-color: #f00 !important;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  border-radius: .25rem;
  padding: 6px 16px;
  letter-spacing: 1px;
}

.tooltip.tooltip-danger .arrow:before {
  border-bottom-color: #f00 !important;
  border-top-color: #f00 !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">



<div class="col-2 actions-edit"><i class="far fa-edit" data-toggle="tooltip" data-placement="top" title="Editar"></i></div>
<div class="col-2 actions-trash"><i class="far fa-trash-alt " data-toggle="tooltip" data-placement="top" title="Eliminar"></i></div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer 2

Глядя на их документацию, вы можете предоставить собственный шаблон для всплывающей подсказки.Это позволит вам добавить определенный класс, на который вы можете настроить таргетинг с помощью CSS.

const options = { template: '<div class="tooltip red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' }

Затем передать параметры при инициализации всплывающей подсказки: $('#example').tooltip(options)

Подробнее о параметрах конфигурации можно прочитать в документации Bootstrap