什么 CSS 选择器可用于选择 Bootstrap 工具提示？答案

【问题标题】：What CSS selector can be used to select Bootstrap tooltips?什么 CSS 选择器可用于选择 Bootstrap 工具提示？
【发布时间】：2014-01-30 05:30:05
【问题描述】：

我终于弄清楚了如何使用 Twitter 引导工具提示，我正在尝试对其进行样式设置。我问过关于其他插件的类似问题，它们最终都是特定的 CSS 选择器。对于 jScrollPane，轨道的选择器是 .jspTrack。

Fiddle

我的问题是，Twitter Bootstrap 工具提示的 CSS 选择器是什么？

【问题讨论】：

getbootstrap.com/javascript/#tooltips
@Jerreck 我已经搜索过教程，他们没有提到任何 CSS 选择器

标签： css twitter-bootstrap css-selectors twitter-bootstrap-3

【解决方案1】：

cmets 中链接的文档向您展示了生成工具提示时生成的标记示例：

标记

生成的工具提示标记相当简单，尽管它确实需要一个位置（默认情况下，由插件设置为top）。
<div class="tooltip">
  <div class="tooltip-inner">
    Tooltip!
  </div>
  <div class="tooltip-arrow"></div>
</div>

据此确定 CSS 选择器应该相当容易。

.tooltip 附加了其他类名称，如果您打开浏览器的 DOM 检查器，然后将鼠标悬停在表单元素上，您可以看到这些名称。您的示例中的一个生成以下.tooltip 元素：

<div class="tooltip fade right in" style="…">

如果您只需要选择属于特定触发器元素的工具提示，这取决于工具提示在 DOM 中的确切位置。文档说（就在我引用的第一部分上方）：

用法

工具提示插件按需生成内容和标记，默认情况下将工具提示放置在其触发元素之后。

所以选择器将是.mytrigger + .tooltip，其中.mytrigger 是触发该工具提示的表单元素。 DOM 位置由container 选项确定，否则为默认设置。

【讨论】：

文档也说你可以使用这个：<element href="" data-toggle="tooltip" title="tooltip"></element> 和$('element').tooltip();
@JJP：是的，但这不会改变工具提示的生成方式。该标记是指与工具提示相关联的元素，而不是工具提示本身。
那为什么工具提示没有你提到的标记工作？
@JJP 提到的标记是在触发工具提示事件时添加的。单击this example 中的input 元素，然后检查DOM。注意到它是如何用 JS 添加的吗？
我没有使用你在我的小提琴中提到的标记，当元素悬停时工具提示仍然显示。