angular2 bootstrap4 tooltip doesn't render html, while popover does

Viewed 580

I'm using angular2 and bootstrap4. Popover correctly renders raw html as bold text asdf

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

However, tooltip renders as plain <b>asdf</b> text including tags

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

Component method getM:

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

Both tooltip and popover are initialized the same way

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

Could someone explain why is that and how to solve? It seems this is connected with initialization order, but I just don't know where to look further.

1 Answers
Related