Currently, I am working on an Angular 6 application that utilizes ngx-translate for localization. Additionally, I have implemented Bootstrap 4 tooltips into the project. However, I am encountering a challenge where I am unable to maintain both localization and the Bootstrap tooltip style simultaneously.
In the absence of localization, I would typically utilize an input field in the following manner:
<input type="text" class="form-control text-truncate" id="position"
placeholder="position" data-title="position" />
This approach displays a visually appealing Bootstrap tooltip, as shown below:
https://i.sstatic.net/BM69n.png
However, when incorporating ngx-translate for localization, my input field is structured as follows:
<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" />
The issue arises with the "data-title" attribute, which seems to encounter difficulties with ngx-translate integration. While the placeholder translates correctly, the tooltip fails to display.
I have also attempted another method:
<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}}" />
Unfortunately, this approach only works for the placeholder and not for the tooltip. Subsequently, I tried:
<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" />
When implemented this way, the tooltip appears but lacks styling, as depicted in the image below:
https://i.sstatic.net/x1G6S.png
Moreover, the code snippet illustrates how I handle tooltips within the 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");
});
}
At this point, I find myself at an impasse. I seek assistance in achieving a properly styled tooltip with translation functionality. Any suggestions or guidance would be greatly appreciated.
Thank you.