Angular 2 using attribute binding with ng2-bootstrap tooltip

Question

I am using the ng2-bootstrap tooltip Plugin for my angular 2 application. I want to add the tooltip attribute if a have defined a tooltip string in a shared file. To accomplish, I thought that the following line would work:

<label [attr.tooltip]="translations['artist-tooltip']">....</label>

This doesn't work however, if I hardcode the line however a tooltip does appear.

<label tooltip="custom string">....</label>

This is strange, because translations['artist-tooltip'] does return a string. If I inspect my element I can see that the HTML is exactly as expected. If I would implement something like:

<label *ngIf="translations['artist-tooltip']" tooltip="translations['artist-tooltip']">...</label>

I would get the desired result, however now the output field isn't shown if a tooltip string isn't defined, and that is not what I want. Does anybody know what is going wrong?

Answer 1

Please try

<label data-tooltip [attr.data-tooltip]="translations['artist-tooltip']">

for me work

obs: Angular 2

Answer 2

Please try

<label tooltip=" " [attr.tooltip]="translations['artist-tooltip']">

or

<label tooltip="{{translations['artist-tooltip']}}">