javascript - 如何将 Twitter Bootstrap 工具提示应用于包含在 中的文本？

Question

显然，您可以将 Twitter Bootstrap工具提示.tooltip添加到具有该类的任何元素，如下所示：

$(document).ready(function() {
    $("a[rel='tooltip'], .tooltip").tooltip();
});

但是，将此类添加到 span 标记似乎不起作用。例子：

<p>1 + 1 = <span class="tooltip" title="Wooo!">2</span></p>

只有链接似乎适用于工具提示。例子：

<p>2 + 2 = <a href="#" rel="tooltip" title="Wooo!">4</a></p>

这是一个 jsFiddle 来演示：http: //jsfiddle.net/ZznzE/

那么如何显示一个包含在跨度中的文本的工具提示呢？

Answer 1

你不需要一个class="tooltip"，而是一个rel="tooltip"

像这样：

<p>1 + 1 = <span rel="tooltip" title="Tip 1">2</span></p>

我更新了你的小提琴，现在可以正常工作了：http: //jsfiddle.net/Xz2e7/1/

我还在cursor: pointerspan 标签上的 CSS 中添加了一个。对于可用性，这更好，因此人们知道页面上哪里有交互。

编辑：

工具提示类并不意味着像您想使用的那样使用它。工具提示类负责处理工具提示本身（例如，在不悬停时使其不可见）。

试试这个：http: //jsfiddle.net/Xz2e7/3/