Bad `.tooltip-inner` placement when using variations in `fallbackPlacements` option
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
When using variations in fallbackPlacements
option (e.g. top-start
, top-end
, etc.), the .tooltip-inner
class is badly placed. However, the .tooltip-arrow
class seems to be well placed.
CodePen: https://codepen.io/Elysiome/pen/dyqYVJw
Current behavior:
Expected behavior:
Reduced test cases
It seems that this issue comes from the padding
of the .tooltip
class which is equal to the height of the arrow: var(--bs-tooltip-arrow-height)
. But I'm not sure.
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.2.3