3

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.

Dmitry Zlykh
  • 470
  • 4
  • 14

1 Answers1

4

Well, the issue was that my element (which tooltip was attached to) was created dynamically.

In exact, I had a 1 sec delayed service. When new data arrived, the <img> element in my component was recreated, but $('[data-toggle="tooltip"]') selector doesn't work with dynamic elements.

Instead, I had to use this selector

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

Now it works as intended.

PS I'm not a front-end developer, so anyone who can explain it in better terms is welcome.

Dmitry Zlykh
  • 470
  • 4
  • 14