如何将Twitter Bootstrap工具提示应用于包含在<span>？</span>中的文本

Question

显然，您可以将Twitter Bootstrap tooltip添加到具有.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/

我还在span标记的css中添加了cursor:pointer。对于可用性，这是更好的，因此人们知道页面上有交互的位置。

修改

工具提示类不适合您想要使用它。工具提示类正在处理工具提示本身（例如，在不悬停时使其隐藏）。

试试这个：

http://jsfiddle.net/Xz2e7/3/