Angular2 bootstrap4 tooltip does not render html while popover does
I am using angular2 and bootstrap4. Popover correctly renders raw html as bold asdf text
<img src="assets/images/1.jpg"
data-container="body" data-toggle="popover" data-html="true" data-placement="top"
[attr.data-content]="getM()"/>
However, the tooltip displays plain text <b>asdf</b>
including tags
<img src="assets/images/2.jpg"
data-container="body" data-toggle="tooltip" data-html="true" data-placement="top"
[attr.title]="getM()"/>
GetM Component Method:
public getM(): string {
return '<b>asdf</b>';
}
Both tooltips and popover are initialized in the same way
$(function () {
$('[data-toggle="tooltip"]').tooltip({container: 'body'});
$('[data-toggle="popover"]').popover({container: 'body'});
})
Can someone explain why this is and how to solve it? It seems to have something to do with the order of initialization, but I just don't know where to look next.
source to share
Ok, the problem was that my element (to which the tooltip is attached) was created dynamically.
Specifically, I had a 1 second latency service. When new data came in, the element <img>
in my component was recreated, but the selector $('[data-toggle="tooltip"]')
doesn't work with dynamic elements.
I had to use this selector instead
$("body").tooltip({selector: '[data-toggle="tooltip"]'});
Now it works as intended.
PS I'm not a third party developer, so anyone who can explain this in better terms is welcome.
source to share