Recently, I upgraded a project from Bootstrap 4 to 5 and encountered an issue with tooltips. When I use placement left, right, or bottom, the tooltip is perfectly positioned on the component. However, when I use placement top, the tooltip appears too high.
I've noticed that if my navbar switches to phone mode, the tooltip placement changes, but only for the 'top' position; it remains unaffected for others.
I adjusted my footer size to keep the tooltip in place, but now, if my navbar switches to phone mode, the tooltip appears too high again.
For this I removed "position: absolute" from the footer component.
Try to set one of the 'boundary' or 'container' options that helps control the positioning of the tooltip relative to its parent element and the boundaries.
https://getbootstrap.com/docs/5.0/components/tooltips/#options