tooltip not working in angular 11

[raosaddam]

I'm trying to update tooltip text dynamically in angular project. I have tried both text interpolation and attribute binding but none of them works.

Text interpolation eg:

<span class="has-tooltip-arrow" data-tooltip="{{gettooltip()}}">
       <fa-icon class="pl-1" [icon]="['far', 'info-circle']"></fa-icon>
 </span>

Attribute binding eg:

<span class="has-tooltip-arrow" [data-tooltip]="gettooltip()">
       <fa-icon class="pl-1" [icon]="['far', 'info-circle']"></fa-icon>
 </span>

Tooltip package version
"@creativebulma/bulma-tooltip": "^1.2.0",

ng version