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一起定位的特定类。

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

然后在初始化工具提示时将选项传递到： $('#example').tooltip(options)

您可以在Bootstrap documentation

上了解有关配置选项的更多信息。

Answer 2

以红色为所需的工具提示添加自定义类。并写一些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>

两种颜色的提示仅适用于CSS

2 个答案: