2013-02-22 77 views
4

我的问题是基于SO质疑Bootstrap tooltips not workingTwitter的引导提示跨度标签(不是标签)

因此,解决方案是使用: jQuery的:

$("[rel='tooltip']").tooltip(); 

HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a> 

而且工作完美。 我的问题是:如果我想使用<span>标记而不是<a>,该怎么办。

是否应该是<span rel="tooltip" title="A nice tooltip">Hover on me</span>

它很完美,但我看到rel属性用于标签。

那么,什么是正确的解决方案?

回答

17

您可以通过以下方式写:

方法1

<a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Tooltip on top">Tooltip on top</a> 

,比用下面的代码初始化:

$('a').tooltip(); 

另一种方法是使用类或ID并逐一初始化它们,如:

方法2

<span class="top" title="A nice tooltip" data-original-title="Tooltip on right">Hover on me</span>  

<a class="top" title="" href="#" data-original-title="Tooltip on top">Tooltip on top</a> 

比用下面的代码进行初始化:

$(".top").tooltip({ 
placement: "top" 
}); 

的jsfiddle Method 1

的jsfiddle Method 2

3

如果你不想使用rel属性上<span>,只需用别的像类和更新提示选择,如:

$("[rel='tooltip'], .tooltip").tooltip(); 

<span class="tooltip" title="A nice tooltip">Hover on me</span> 

您可以使用jQuery的内部的任何CSS选择器功能$()以任何方式选择页面上的任何元素。