css - 仅使用 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>