I am attempting to align my input field tooltip perfectly with the bottom left corner of the input field. The page contains multiple dynamically generated input fields, so achieving this alignment is crucial.
After trying to use the offset parameter, I found that it was not very effective when dealing with zoomed content. The correction of +11 proved to be cumbersome in creating a general solution.
$('[data-toggle=tooltip]').tooltip({
placement: "bottom",
title: "test"
offset: -$('#inputFieldId').width()/2 + 11
});
I experimented with modifying the transform style of the .bs-tooltip-bottom class and found that it yielded good results! However, the tooltip flickers momentarily between its original bottom position and the new bottom left position. There must be an easier way to achieve this, but I have yet to discover it.
$('#inputFieldId').on('shown.bs.tooltip', function () {
var x = $('#inputFieldId').offset().left;
var y = $('#inputFieldId').offset().top + $('#inputFieldId').height();
$('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
})
To address the flickering issue, I attempted to set the opacity of the tooltip to 0 before showing it and revealing it only after applying my custom transformation. Despite these efforts, the flickering persisted.
CSS:
.tooltip.show {
opacity: 0;
}
JavaScript:
$('#inputFieldId').on('show.bs.tooltip', function () {
$('.bs-tooltip-bottom').css('opacity', '0');
})
$('#inputFieldId').on('shown.bs.tooltip', function () {
var x = $('#inputFieldId').offset().left;
var y = $('#inputFieldId').offset().top + $('#inputFieldId').height();
$('.bs-tooltip-bottom').css('transform', 'translate3d('+x+'px, '+y+'px, 0px)');
$('.bs-tooltip-bottom').css('opacity', '0.9');
})
UPDATE:
It appears that the element .bs-tooltip-bottom does not exist during the show event, rendering the opacity workaround ineffective.