34

リンクがあり、ブートストラップのツールチップを設定したいのですが、ブートストラップのモーダルも表示したいです。モーダルを表示するには、コードは次のとおりです。

<a href="#myModal" role="button" data-toggle="modal">Show</a>

そして、以下はブートストラップのツールチップを作成します:

<a data-placement="right" data-toggle="tooltip" rel="tooltip" data-original-title='Hello' href="#"></a>

次に、それをどのように組み合わせるか。結合とは、モーダルを表示し、ブートストラップのツールチップも持つリンクを持つことを意味しますか?

4

6 に答える 6

22

次のようなラッピング要素を使用したいと思います。

<span data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</span>

これは私にはより簡単に思えます。この bootply を参照してください: http://www.bootply.com/zqJRSAjSuQ

于 2014-11-20T11:10:19.440 に答える
13

ツールチップに「data-toggle」を使用する必要はありません。たとえば、「data-tt」のように、必要に応じて変更できます。

<a href="#myModal" role="button" data-toggle="modal" data-tt="tooltip" title="hi">Show</a>

そしてJavaScriptで初期化します：

$("[data-tt=tooltip]").tooltip();

Jsフィドル

于 2015-08-01T14:55:18.090 に答える
13

U も初期化する必要がある場合があります。ページの下部で初期化する必要がありました。

        $("[rel='tooltip']").tooltip();
于 2013-12-25T10:44:56.127 に答える
10

要素に data 属性を追加します。

<a data-toggle="modal" data-hover="tooltip" title="Click to Open" data-placement="right" href="#"></a>

そしてJavaScriptで初期化します：

$("[data-hover='tooltip']").tooltip();
于 2015-02-19T21:22:39.633 に答える
2

ツールチップが間違って配置されている場合は、要素のdiv代わりに aを使用することを検討することをお勧めします ...span

FLの答えに基づいて、これは私にとってはうまくいきました：

<div data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</div>
于 2014-12-18T11:01:31.950 に答える