Tooltip & Pophover: In RTL attachment is getting changed

Hi there,

This is a tricky one as you won’t be able to find the issue in RTL Cheatsheet as RTL CSS solve this issue. But actually, this is the JS issue.

Bug reports must include: Operating system: MACOS Big Sur11.3.1 (20E241) Browser: Chrome Version 89.0.4389.90 (Official Build) (x86_64) Codepen: https://codepen.io/ajaypatelaj/pen/qBrPXQL?editors=1111

To explain I have attached the below Images to understand it easily.

Now in RTL, AttachmentMap is getting updated with with isRTL condition. const AttachmentMap = { AUTO: 'auto', TOP: 'top', RIGHT: isRTL() ? 'left' : 'right', BOTTOM: 'bottom', LEFT: isRTL() ? 'right' : 'left' }

In Tooltip.js (Maybe the same as in Pophover.js) function _getAttachment is getting called twice which works fine with LTR. But, in RTL it is changing the value from right to left and vice-versa. Due to this condition RIGHT: isRTL() ? 'left' : 'right',

For more details check the below image. Ideally, it’s getting changed already in show() function and _handlePopperPlacementChange() function change it again.

It should not be changed again, else the arrow in RLT will appear in the wrong direction. (NOTE: If you use the RTL style, then the style will make the arrow position correct which may confuse you with the issue.)

chi

Hope It can help you to understand. Let me know if you need more details.

Stay Safe~

[alpadev]

@ffoodd I don’t get it either. The tooltip uses the class bs-tooltip-start (while positioned on the right hand side) which seems to be the correct class to use in RTL mode. The tip of the arrow is positioned using CSS which properly sets it to be on the left side of the tooltip when used together with the correct CSS file.

Both agreeing that it works with the RTL CSS file, so I don’t see the problem here.

I mean the first call to _addAttachmentClass seems to be setting the wrong class but once the tooltip is shown and popper is updating it’s placement the correct class is used, so this is only a temporary issue if even because you can’t see the tooltip. We could likely drop that first call within show but that wouldn’t really change the the requirement to use the RTL CSS file.

/CC @rohit2sharma95 any idea?

[ajaypatelaj]

@rohit2sharma95 Thanks for the clarification, I understood that the classes are not going to change in RTL same as utils classes i.e ml-*, pl-*. I have got confused because it’s managed in JS and CSS also. And in JS it’s like show() function make it bs-tooltip-right and _handlePopperPlacementChange make it again bs-tooltip-left I guess if we’re handling it with CSS do we need RTL condition in JS (tooltip.js)?

@alpadev https://ishadeed.com/article/css-logical-properties/ informative. But in bootstrap, I think class remains the same in RTL i.e ml-*, pe-* and we’re changing their style here to make it RTL.

@ffoodd I was thinking the same “end means right in LTR but left in RTL.”

I think I should also do this with CSS and not concentrate on class 😃 Apology if I misunderstood and made you guys crazy due to this dilemma.

You can close the issue as the conclusion as per me is that we’re changing the style in RTL and not the class.

Stay Safe~