web-dev-qa-db-ja.com

Twitter Bootstrapスパンタグのツールチップ（タグではない）

私の質問はSO質問 ブートストラップツールチップが機能しない に基づいています

したがって、解決策は次を使用することです。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属性が使用されていることがわかります。

それで、正しい解決策は何ですか？

html5twitter-bootstraptooltiphtml
8
Haradzieniec

次の方法で書くことができます：

方法1

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

そして、次のコードで初期化するよりも：

$('a').tooltip();

もう1つの方法は、クラスまたはIDを使用して、次のように1つずつ初期化することです。

方法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 方法1

Jsfiddle 方法2

20
Shail

_<span>_でrel属性を使用したくない場合は、クラスなどの他のものを使用して、ツールチップセレクターを更新します。例：

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

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

JQuery関数$()内の任意のCSSセレクターを使用して、ページ上の任意の要素を任意の方法で選択できます。

4
Dunhamzzz