仅使用 CSS 的两个工具提示的不同颜色答案

【问题标题】：Different color for two tooltips with CSS only仅使用 CSS 的两个工具提示的不同颜色
【发布时间】：2018-10-09 02:32:47
【问题描述】：

我有 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>

【问题讨论】：

标签： css bootstrap-4 twitter-bootstrap-tooltip

【解决方案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>

【讨论】：

【解决方案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 documentation阅读更多关于配置选项的信息

【讨论】：