尝试修改 Bootstrap 工具提示的工具提示颜色答案

【问题标题】：Attempting to modify the tooltip color of Bootstrap tooltips尝试修改 Bootstrap 工具提示的工具提示颜色
【发布时间】：2013-12-11 10:16:17
【问题描述】：

我会保持简短而甜蜜。我不知道有一种方法可以即时冻结 JavaScript/HTML 以调试在 Bootstrap UI 中显示的工具提示，但我能够追踪并修改大部分默认的“黑色”基色。但是，我无法追踪代码所在的位置以更改我在这里构建的工具提示上的顶部“箭头”：http://jsfiddle.net/jodriscoll/xPCST/。

/* override the tooltip color theme */
.tooltip-inner,
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow,
.tooltip.right .tooltip-arrow,
.tooltip.left .tooltip-arrow
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
    background-color: rgb(220,40,30);
    border-color: rgb(220,40,30);
}

如果有人可以让我知道这段代码的位置，或者如何在页面上暂停 JavaScript，以便我可以将正在创建的容器定位到页面底部，我将不胜感激 :)

【问题讨论】：

如果您使用 Firefox，请安装 firebug - 有一个简单的 DOM 检查工具，可让您单击任何元素并检查它（包括 CSS）
你的小提琴不起作用：ReferenceError: options is not defined
你的小提琴不起作用。它没有显示任何工具提示... :(
也许最好的解决方案是转到：getbootstrap.com/customize 并在那里设置您想要的颜色。
这是 Fiddle 的工作版本：jsfiddle.net/xPCST/8

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

你需要在 bootstrap css 中更改以下内容

.tooltip-arrow {
    border-bottom-color: #000;
}

或者，您可以在自己的自定义 css 中覆盖它

见 jsfiddle - http://jsfiddle.net/xPCST/12/

【讨论】：

试图以 CSS 的链接为目标，但不幸的是它没有做任何事情。 jsfiddle.net/jodriscoll/xPCST
在 bootstrap.css 被引用之后，您是否将其添加到单独的 css 文件中？
它通过 jsFiddle 引擎运行，引擎的 CSS 窗口中的任何内容都在样式标签中呈现并覆盖所有引用的 CSS 文件。我不相信 CSS 选择器的目标是工具提示矩形顶部的小“黑色”箭头。
好的，我更新了 jsfiddle，证明这可以在 css 中完成 - jsfiddle.net/xPCST/12
啊！我明白你现在的意思了。它在优先级方面被覆盖。我会更深入地避免 !important ，因为它不受欢迎，但它暂时解决了我的问题。谢谢！ +1复选标记！ jsfiddle.net/jodriscoll/xPCST