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?

Sounds like a timing issue, like the bound value is read by bootstrap before Angular actually assigned it and then later assigned values are ignored. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 30, 2016 at 14:17

Günter Zöchbauer · Accepted Answer · 2016-05-30 14:24:32Z

1

Please try

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

or

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

edited May 30, 2016 at 14:24

answered May 30, 2016 at 14:18

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

hY8vVpf3tyR57Xib Over a year ago

The first option only shows the empty tooltip (but at least it shows one), the second does work, the only problem is that it also shows an empty tooltip if there isn't a translation defined.

hY8vVpf3tyR57Xib Over a year ago

I assume you forgot one bracket in your second suggestion?

Günter Zöchbauer Over a year ago

Thanks, already removed it. This confirms my suspicion about timing. *ngIf seems to be the only proper way then.

jhhoff02 Over a year ago

Cheers Angular guru Gunter, your first suggestion worked for async data from an *ngFor: tooltipNotes=" " [attr.tooltipNotes]="getRecord(record)?.Notes"

Günter Zöchbauer Over a year ago

Glad to hear :) Thanks for the feedback!

|

Messias · Accepted Answer · 2016-08-17 14:06:10Z

0

Please try

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

for me work

obs: Angular 2

edited Aug 17, 2016 at 14:06

answered Aug 17, 2016 at 14:01

Messias

11 bronze badge

1 Comment

thecoshman Over a year ago

an explanation would be nice to go with this.

Collectives™ on Stack Overflow

Angular 2 using attribute binding with ng2-bootstrap tooltip

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related