我正在尝试为工具提示输出各种颜色（编辑：来自 Twitter Bootstrap），但似乎我不太明白。更改默认颜色并不难，只需更改 .tooltip 及其相关定义的颜色即可。
但是假设我想更改正文中特定工具提示的颜色
<div id="users" class="row">
<div id="photo_stack" class="span6 photo_stack">
<img id="photo1" src="" width="400px" height="300px" alt="" rel="tooltip" data-placement="right" title="Other Color" />
一个简单的方法，如
#users .tooltip { background-color: #somecolor; }
似乎不起作用。我想这与 DOM 有关，我需要将某种类附加到特定的工具提示中？还是我完全关闭了？谢谢 ：）
这是一个 JSFiddle：http: //jsfiddle.net/rZxrm/
Twitter bootstrap 没有内置此功能，但您可以添加自己的函数来执行此操作，如下所示：
$('#photo1').hover(function() {$('.tooltip').addClass('tooltipPhoto')}, function () {$('.tooltip').removeClass('tooltipPhoto')});
然后你只需要tooltipPhoto在 CSS 中定义类以具有不同的背景颜色。
编辑：更新的解决方案：
function changeTooltipColorTo(color) {
$('.tooltip-inner').css('background-color', color)
$('.tooltip.top .tooltip-arrow').css('border-top-color', color);
$('.tooltip.right .tooltip-arrow').css('border-right-color', color);
$('.tooltip.left .tooltip-arrow').css('border-left-color', color);
$('.tooltip.bottom .tooltip-arrow').css('border-bottom-color', color);
}
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
$('#photo1').hover(function() {changeTooltipColorTo('#f00')});
$('#photo2').hover(function() {changeTooltipColorTo('#0f0')});
$('#photo3').hover(function() {changeTooltipColorTo('#00f')});
});
如果您使用工具提示，您可能希望使用内置主题颜色，即信息、成功、危险和警告。然而，Bootstrap 不支持工具提示主题（在撰写本文时为 V3），但我们可以添加几行 CSS 来实现这一点。
理想情况下，我们想要的是一组类tooltip-info，tooltip-danger等等tooltip-success，您可以将它们应用于您正在调用的元素tooltip()。我将在下面给出完全符合此要求的代码，并使用 Bootstrap 3.0 进行测试。
下面的代码基本上重用了警报组件的样式，因为它与工具提示非常相似。请注意，这样做几乎没有什么好处，包括不仅背景颜色会发生变化，而且文本颜色和边框颜色也会发生变化。此外，它使工具提示具有略微透明的光泽外观。工具提示中的箭头取决于边框颜色，因此可以通过继承警报组件的边框颜色来单独更改。
另请注意，这些不是全局更改。tooltip-info除非您像获得默认工具提示一样应用类。
<span class="tooltip-info" title="Hello, I'm dangerous">
Hover here to see tooltip!
</span>
请注意，默认情况下不激活引导工具提示，因此您需要像这样激活（请参阅https://stackoverflow.com/a/20877657/207661）
$(document.body).tooltip({ selector: "[title]" });
在这里玩这个代码：http: //jsbin.com/usIyoGUD/3/edit ?html,css,output
//Import these from your own Bootstrap folder
@import "js/ext/bootstrap/less/mixins.less";
@import "js/ext/bootstrap/less/variables.less";
.tooltip-border-styles(@borderColor) {
& + .tooltip {
&.top .tooltip-arrow,
&.top-left .tooltip-arrow,
&.top-right .tooltip-arrow {
border-top-color: @borderColor;
}
&.bottom .tooltip-arrow,
&.bottom-left .tooltip-arrow,
&.bottom-right .tooltip-arrow {
border-bottom-color: @borderColor;
}
&.right .tooltip-arrow {
border-right-color: @borderColor;
}
&.left .tooltip-arrow {
border-left-color: @borderColor;
}
}
}
.tooltip-info {
& + .tooltip .tooltip-inner {
.alert-info;
}
.tooltip-border-styles(@alert-info-border);
}
.tooltip-danger {
& + .tooltip .tooltip-inner {
.alert-danger;
}
.tooltip-border-styles(@alert-danger-border);
}
.tooltip-warning {
& + .tooltip .tooltip-inner {
.alert-warning;
}
.tooltip-border-styles(@alert-warning-border);
}
.tooltip-success {
& + .tooltip .tooltip-inner {
.alert-success;
}
.tooltip-border-styles(@alert-success-border);
}
如果你不使用 LESS 或者不想处理它，那么你可以直接使用下面编译的 CSS：
.tooltip-info + .tooltip .tooltip-inner {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
background-repeat: repeat-x;
border-color: #9acfea;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
}
.tooltip-info + .tooltip.top .tooltip-arrow,
.tooltip-info + .tooltip.top-left .tooltip-arrow,
.tooltip-info + .tooltip.top-right .tooltip-arrow {
border-top-color: #bce8f1;
}
.tooltip-info + .tooltip.bottom .tooltip-arrow,
.tooltip-info + .tooltip.bottom-left .tooltip-arrow,
.tooltip-info + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #bce8f1;
}
.tooltip-info + .tooltip.right .tooltip-arrow {
border-right-color: #bce8f1;
}
.tooltip-info + .tooltip.left .tooltip-arrow {
border-left-color: #bce8f1;
}
.tooltip-danger + .tooltip .tooltip-inner {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
background-repeat: repeat-x;
border-color: #dca7a7;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
}
.tooltip-danger + .tooltip.top .tooltip-arrow,
.tooltip-danger + .tooltip.top-left .tooltip-arrow,
.tooltip-danger + .tooltip.top-right .tooltip-arrow {
border-top-color: #ebccd1;
}
.tooltip-danger + .tooltip.bottom .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-left .tooltip-arrow,
.tooltip-danger + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #ebccd1;
}
.tooltip-danger + .tooltip.right .tooltip-arrow {
border-right-color: #ebccd1;
}
.tooltip-danger + .tooltip.left .tooltip-arrow {
border-left-color: #ebccd1;
}
.tooltip-warning + .tooltip .tooltip-inner {
color: #8a6d3b;
background-color: #fcf8e3;
border-color: #faebcc;
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
background-repeat: repeat-x;
border-color: #f5e79e;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
}
.tooltip-warning + .tooltip.top .tooltip-arrow,
.tooltip-warning + .tooltip.top-left .tooltip-arrow,
.tooltip-warning + .tooltip.top-right .tooltip-arrow {
border-top-color: #faebcc;
}
.tooltip-warning + .tooltip.bottom .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-left .tooltip-arrow,
.tooltip-warning + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #faebcc;
}
.tooltip-warning + .tooltip.right .tooltip-arrow {
border-right-color: #faebcc;
}
.tooltip-warning + .tooltip.left .tooltip-arrow {
border-left-color: #faebcc;
}
.tooltip-success + .tooltip .tooltip-inner {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
background-repeat: repeat-x;
border-color: #b2dba1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
}
.tooltip-success + .tooltip.top .tooltip-arrow,
.tooltip-success + .tooltip.top-left .tooltip-arrow,
.tooltip-success + .tooltip.top-right .tooltip-arrow {
border-top-color: #d6e9c6;
}
.tooltip-success + .tooltip.bottom .tooltip-arrow,
.tooltip-success + .tooltip.bottom-left .tooltip-arrow,
.tooltip-success + .tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #d6e9c6;
}
.tooltip-success + .tooltip.right .tooltip-arrow {
border-right-color: #d6e9c6;
}
.tooltip-success + .tooltip.left .tooltip-arrow {
border-left-color: #d6e9c6;
}
我为您的问题找到了另一种解决方案（我试图做同样的事情）。只需更改主 CSS 样式表中的颜色（只要您的样式表在文档头部的 bootstrap 之后列出，它就会覆盖 bootstrap）。
具体来说，这是您添加到主样式表的内容（例如）：
.tooltip-inner {
background-color: #D13127;
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #D13127;
}
请参阅动态地将类添加到 Bootstrap 的“弹出框”容器
她的修复通过用一行修改 bootstrap.js 来允许数据类选择器
这是我在 sass 中的做法
.tooltip-inner
color: #fff
background-color: #111
border: 1px solid #fff
.tooltip.in
opacity: .9
和位置相关部分
.tooltip.bottom .tooltip-arrow
border-bottom-color: #fff
请参阅我对类似问题的回复：更改引导工具提示颜色
它适用于现有和动态创建的元素的样式工具提示，使用 Bootstrap 3 或 Bootstrap 4。
Bootstrap 3:
$(document).on('inserted.bs.tooltip', function(e) {
var tooltip = $(e.target).data('bs.tooltip');
tooltip.$tip.addClass($(e.target).data('tooltip-custom-class'));
});