Twitter Bootstrapツールチップを動的に作成された要素にバインドするにはどうすればよいですか？

次のようなJavaScriptでTwitterブートストラップツールチップを使用しています。

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

私のマークアップは次のようになります：

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

これは正常に機能しますが、<a>要素を動的に追加し、それらの動的要素のツールチップが表示されません。ドキュメントが典型的なjquery $(document).ready(function()機能でロードされたときに一度だけ.tooltip（）をバインドするためです。

これを動的に作成された要素にバインドするにはどうすればよいですか？通常、私はjquery live（）メソッドを介してこれを行います。しかし、バインドに使用するイベントは何ですか？ブートストラップ.tooltip（）をjquery .live（）に接続する方法がわからないだけです。

この作業を行う1つの方法は次のようなものです。

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

これは機能しますが、一種のハックのようです。また、$（ready）呼び出しでまったく同じ.tooltip（）行を呼び出しています。では、ページが最初に読み込まれてセレクターに一致するときに存在する要素は、ツールチップで2回表示されるのでしょうか。

私はこのアプローチで何の問題も見ていません。私は、行動のベストプラクティスまたは理解を求めています。

これを試してください：

$('body').tooltip({
    selector: '[rel=tooltip]'
});

初期化する複数のツールチップ構成がある場合、これは私にはうまくいきます。

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

次に、data属性を使用して個々の要素にプロパティを設定できます。

私にとっては、mouseenterイベントをキャッチするだけでは少しバグがあり、ツールチップが適切に表示/非表示になりませんでした。私はこれを書かなければならなかった、そしてそれは今完全に働いている：

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});

私はここに長い回答を投稿しました：https：//stackoverflow.com/a/20877657/207661

TL; DR：ドキュメント準備完了イベントで実行されるコードは1行だけ必要です。

$(document.body).tooltip({ selector: "[title]" });

他の回答で提案されている他のより複雑なコードは必要ないようです（私はこれをBootstrap 3.0でテストしました）。

私にとって、このjsはで発生する同じ問題を再現します Paola

私の解決策：

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

フルボディで検索するのではなく。私はこのようなシナリオですでに利用可能な動的なタイトルオプションを使用することができると思います：

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

これらの答えの組み合わせが私に最高の結果をもたらしたことがわかりました-ツールチップを引き続き配置し、関連するコンテナーにアタッチすることができます：

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

関連するHTML：

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>