tooltip data doesn't update

Question

Does anyone know why the tooltip here doesn't update? When I change the title, it should update. Is there something wrong? How can I solve this?

<div class="title" [innerHTML]="shortedTitle(page.title) | englishMarker" data-toggle="tooltip" title="{{page.title}}"></div>

here is the image of output

Answer 1

The tooltip needs to be updated programmatically once the title attribute has been changed, it will not automatically render changes made to the div.

Solution from this stackoverflow question;

$(element).attr('title', 'NEW_TITLE')
      .tooltip('fixTitle')
      .tooltip('show');