Twitter bootstrap 更改引导工具提示的颜色

我从另一篇文章中获取了这段代码，但是它对我来说不起作用。工具提示（包括箭头）应为蓝色，但它们保持为黑色

$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
});
.tooltip primary+.tooltip>.tooltip内部{背景色：蓝色；}
.tooltip主+.tooltip>.tooltip箭头{边框底色：蓝色；}
问题出在您的
+
选择器中--请记住，这是相邻的兄弟组合符，这意味着目标需要紧跟在您引用的元素之后。引导工具提示并非如此；它被注入DOM的底部

在这个特定的示例中，它仍然是一个兄弟，所以您可以使用将其作为目标，只需将
+
替换为
~
（tilde）：


$（文档）.ready（函数（）{
$（'[data toggle=“tooltip”]'）。tooltip（）
});
.tooltip primary~.tooltip>.tooltip内部{
背景颜色：蓝色；
}
.tooltip主~.tooltip>.tooltip箭头{
边框底色：蓝色；
}
如果锚点不在根级别，则解决方案

如果锚点不在根级别，我发现唯一有效的方法就是使用inserted.bs.tooltip事件，并向内部div和箭头添加一个类。然后您可以在css中以类为目标


//初始化工具提示
$（'[data toggle=“tooltip”]'）。tooltip（）；
//创建toolip时，将类添加到toolip
$（'[data toggle=“tooltip”]'）。on（'inserted.bs.tooltip'，function（）{
var thisClass=$（this.attr（“类”）；
$（'.tooltip-inner'）.addClass（thisClass）；
$（'.arrow'）.addClass（thisClass+“-arrow”）；
});
/*根据您的类设置工具提示框和箭头的样式*/
.bs工具提示左。红色提示{
背景颜色：红色！重要
}
.bs工具提示左。红色提示箭头：：前{
左边框颜色：红色！重要
}

显示红色工具提示
我看到这是可行的，但当我在我的应用程序中尝试时，它仍然是默认的黑色。我真的不明白你的解释。问题是你的应用程序中可能有类似
的东西。在这种情况下，工具提示将成为
的同级。因为您最初的CSS目标是
标记，所以您需要“向上遍历”一个级别，并以父级
的兄弟级为目标。不幸的是，这在CSS中是不可能的，因为没有父选择器（您可能需要类似于
div:has（.tooltip primary）~.tooltip
）。不幸的是，在这种情况下，您将需要JavaScript。