初回表示時にtooltipを出す例はBootstrapのサイトでも紹介されているのですが、Ajaxで書き換えた後でも表示する方法がわかったのでメモしておきます。

初回表示時にtooltipを仕込むための処理

まずは最初にやっていたやつ。

$ ->
  $('[data-toggle="tooltip"]').tooltip()

これはAjaxに対応していません…。

Ajaxによる画面書き換えにも対応したtooltipを仕込む処理

次に、Ajaxに対応したやつ。これは、bodyタグに対してイベントを仕込み、オプションでselectorを指定しています。Bootstrap3のオプションの説明でも書いてありますが、動的なHTMLに対応できるようになる、と書いてあります。

Bootstrap3: tooltip-options

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

思ったよりも簡単に対応できてよかったです。さすがBootstrap3。

Tweet