環境

やりたいこと

動的に生成された要素にBootstrapのツールチップを適用したい。しかし、以下のコードではツールチップが正常に動作しない。

$('#mybutton').click(function() {
  $('#content').append('<a href="#" data-toggle="tooltip">hover me</a>');
});

このコードは、ボタンをクリックすると新たなリンク要素が生成され、そのリンク要素にツールチップが適用されることを期待している。しかし、実際には新たに生成された要素に対してツールチップが機能しない。

イベントの登録をbodyに対して行えばOK

document.addEventListener('DOMContentLoaded', () => {
  $('body').tooltip({ selector: '[data-toggle="tooltip"]' });
});

new bootstrap Tooltip("body", {
    selector: "[data-bs-toggle='tooltip']"
});