Angular 6: ngx-translate not working with data-title attribute for tooltips

Question

I'm developing an Angular 6 app which uses ngx-translate for localization and I'm also using Bootstrap 4 tooltips and the problem I'm facing is I'm not being able use localization keeping Bootstrap tooltip style.

Without localization I would use an input this way:

<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />

And this will show a very nice Bootstrap tooltip as it can be seen below:

With ngx-translate localization I would use an input this way:

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position" 
    [attr.placeholder]="'wfrh_vacancyform_position' | translate" 
    [attr.data-title]="'wfrh_vacancyform_position' | translate" />

and the problem here is data-title attribute. "data-title" attribute is used to display the tooltip but I guess ngx-translate doesn't recognize it (maybe?).

Placeholder is working fine this way (the text is translated and shown correctly) but tooltip won't show.

I've also tried this way:

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position"
placeholder="{{'wfrh_vacancyform_position' | translate}}" 
data-title="{{'wfrh_vacancyform_position' | translate}}" />

which is also not working (it only works for placeholder) so I'm stuck.

If I do:

<input type="text" data-toggle="tooltip" class="form-control tooltipped text-truncate" id="position" 
    [attr.placeholder]="'wfrh_vacancyform_position' | translate" 
    [attr.title]="'wfrh_vacancyform_position' | translate" />

then the tooltip shows but with no style as it can be seen in the next image:

And this is the way I create the tooltips in code (in ngOnInit):

ngOnInit() {
   setTooltip()
}

  setTooltip() {

    $('.tooltipped').tooltip({
      placement: 'auto',
      trigger: 'focus',
      template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>'
    });

    $('.tooltipped').bind("mouseover", function () {
      var _this = $(this);
      _this.tooltip("show");
    });

    $('.tooltipped').bind("mouseout", function () {
      var _this = $(this);
      _this.tooltip("hide");
    });

    $('.tooltipped').bind("keyup", function () {
      var _this = $(this);
      _this.tooltip("hide");
    });
  }

Well I'm stuck. I need to be able to display this nice styled tooltip with translation. Any help / ideas?

Thanks.

Answer 1

Ok, after long time investigating I was able to find a solution and I'll post it here in case it helps anyone else.

The problem is I was setting tooltip in onInit (which is fired only once when the component is created) and wasn't setting any tooltip text, just leaving it to pickup the one set with:

[attr.data-title]="'text_to_translate_key' | translate"

(the initial text translation) and after changing language tooltip was not refreshing (the text was static with the initial value) but you can use a function with the tooltip "title" property this way:

    $('.tooltipped').tooltip({
      placement: 'auto',
      trigger: 'focus',
      template: '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner bg-dark text-light"></div></div>',
      title: this.setTitle
    });

  setTitle() {

    return $(this).attr("placeholder");
  }

and this function (which has current object reference -this- as an implicit input parameter) acts as a binding which updates the title property continuosly so when placeholder text changes (placeholder does not need to be refreshed after language changes and that's why it works) the tooltip "title" property will be updated and as a consequence tooltip text will change and user will see updated text.

"The end" :)