Подсказка angular2 bootstrap4 не отображает HTML, в то время как popover делает

Question

Я использую angular2 и bootstrap4. Popover правильно отображает сырой HTML как жирный текст в формате PDF

<img src="assets/images/1.jpg"
                             data-container="body" data-toggle="popover" data-html="true" data-placement="top"
                             [attr.data-content]="getM()"/>

Тем не менее, подсказка отображается как простая <b>asdf</b> текст, включая теги

<img src="assets/images/2.jpg"
                              data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
                              [attr.title]="getM()"/>

Компонентный метод getM:

  public getM(): string {
    return '<b>asdf</b>';
  }

И всплывающая подсказка и popover инициализируются одинаково

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

Может кто-нибудь объяснить, почему это и как решить? Кажется, это связано с порядком инициализации, но я просто не знаю, где искать дальше.

Answer 1

Ну, проблема была в том, что мой элемент (к которому была прикреплена подсказка) был создан динамически.

Точно, у меня был задержанный сервис на 1 секунду. Когда поступили новые данные, <img> элемент в моем компоненте был воссоздан, но $('[data-toggle="tooltip"]') селектор не работает с динамическими элементами.

Вместо этого мне пришлось использовать этот селектор

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

Теперь это работает как задумано.

PS Я не фронтенд-разработчик, поэтому приветствуется любой, кто сможет объяснить это лучше.