javascriptで生成する要素にツールチップを実装したい【Bootstrap】

Question

お世話になります。
現在作成しているサイト(bootstrapを使用)でツールチップの実装を行っているのですが、表示されず困っております。

色々と検証しているうちに、
htmlで直接

<div class="test">
    <div data-toggle="tooltip" title="ツールチップ">
        aaaaa
    </div>
</div>

と書くとツールチップは表示されるのですが、
javascriptで生成されるソースに対してはツールチップが表示されないことに気づきました。

var contents = '<div class="test" data-toggle="tooltip" title="ツールチップ">aaaaa</div>';

target = document.getElementById('test');
target.innerHTML = contents ;

<div id="test">
</div>

javascrptで生成するコンテンツでツールチップを表示させるにはどのようにしたらよろしいでしょうか？
どうぞよろしくお願いします。

Answer 1

どこかに、

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

と書きませんでしたか？
ツールチップは自動的には動作しなかったはずです。

何か動的に追加したら、そこでもう一度tooltip()を呼べばつきます。

$(target).find('[data-toggle="tooltip"]').tooltip();

Comments

[yamakasa]

ありがとうございます。
動的に追加したらイベントを追加する必要がある？？等の記事を見て行き詰っていましたが…
もう一度tooltip()を呼んだらつきました！