使用新 class 更改工具提示背景颜色

Question

在 package.json 中说我正在使用 Bootstrap 的以下版本：

{
  "_from": "bootstrap@^4.5.0",
  "_id": "bootstrap@4.6.0",
...
}

我想在某些页面上更改工具提示的背景颜色，方法是添加新的 class。

这里是 HTML 代码：

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" class="red-tooltip">Tooltip on bottom</a>

在没有 class="red-tooltip" 的情况下，我设法使用以下 CSS 代码更改了背景颜色：

.tooltip.show {
  opacity: 1;
}

.tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #ff0000 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
 border-left-color: #ff0000 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
 border-bottom-color: #ff0000 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
 border-top-color: #ff0000 !important;
}

在所有这些行前面添加“.red-tooltip”是行不通的。你能帮我实现这个目标吗？

Answer 1

Bootstrap 生成一个新的 html 元素作为“工具提示”并将其附加到文档主体，独立于相关的 a 标签。在https://getbootstrap.com/docs/4.0/components/tooltips/#markup.

中可以看到生成的html

因此，更新相关 a 标签中的 class 对工具提示生成的 html 没有影响。但是您可以通过多种方式应用不同的样式：

修改“工具提示”的CSS。将 classes 重新定义为 .tooltip-inner 您可以覆盖基本样式（如在您的代码中）。
在所需页面的正文中添加 class，例如 red-tooltip 并像这样个性化“toooltip”：

.red-tooltip .tooltip-inner {
  background: red;
}

我最喜欢的是在 javascript 中重新定义“工具提示”html 模板。这允许在同一页面中使用不同样式的工具提示。

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
$(function () {
  $('[data-toggle="tooltip-red"]').tooltip({
    template: '<div class="tooltip tooltip-red" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
    
  })
})

.tooltip-red .tooltip-inner {
  background: red;
}

.tooltip-red .bs-tooltip-top .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: red;
}
.tooltip-red .bs-tooltip-right .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: red;
}
.tooltip-red .bs-tooltip-bottom .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: red;
}

.tooltip-red .bs-tooltip-left .arrow::before, 
.tooltip-red .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: red;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me (Normal)</a>

<br>
<br>

<a href="#" data-toggle="tooltip-red" title="Some tooltip text!">Hover over me (Red)</a>

使用新 class 更改工具提示背景颜色

Change tooltip background color with new class

javascript

css

tooltip

bootstrap-4