Fix tooltip alignment logic and removed hover blockage #4809

[stutijain2006]

This PR fixes incorrect tooltip placement by

• Supporting dynamic positioning like top, bottom, left and right
• Using correct selector for main/aux toolbar icons.
• Removes hardcoded positioning of various buttons.

Fixes #4809

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

ledt?

[theAnuragMishra]

she meant left probably

[walterbender]

why are you adding the space?

[walterbender]

Can you be clear about what changes in the UX from this PR?

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[stutijain2006]

Can you be clear about what changes in the UX from this PR?
In order to make the interface simpler and more user-friendly, this PR enhances the tooltip behavior.

Earlier tooltips used to have a fixed position. As a result:

1. Sometimes adjacent buttons were covered by tooltips, making them difficult or impossible to click.
2. Additionally, tooltips may overlap dropdown content, preventing interaction and visibility.

With this modification:

1. The positioning of tooltips is now dynamic.
2. Depending on the available space, each tooltip modifies its position.
3. Other buttons and dropdown items are no longer covered by tooltips.
4. Without having to shift the cursor, users can effortlessly interact with all controls.

In general, this results in a cleaner, easier-to-use, and less annoying user interface, particularly when interacting with closely spaced buttons.

Also, Some changes in the diff are due to automatic code formatting applied by my IDE.
These include whitespace adjustments and indentation fixes. No functional logic
was altered in those sections.

[theAnuragMishra]

I believe this is too much for something as simple as tooltips.
I gave your changes a look. To me it looks like you'll be adding event listeners and configuring tooltips for every icon on every mouse event related to hover. Too much imo. Maybe even causes performance issues.

[stutijain2006]

I believe this is too much for something as simple as tooltips. I gave your changes a look. To me it looks like you'll be adding event listeners and configuring tooltips for every icon on every mouse event related to hover. Too much imo. Maybe even causes performance issues.

Just to clarify the intent and scope of the change: the logic is not attaching tooltip listeners or recalculating positions on every hover event. The positioning is computed once after the toolbar is rendered, and tooltips are then initialized with a fixed position for each icon. There is no continuous work happening during hover itself, so this should not introduce runtime or performance overhead.

The reason for handling this dynamically instead of hard-coding positions is maintainability and scalability. Today, tooltips overlap because their positions are static. If we keep the current approach, every time a new icon is added, removed, or reordered in the toolbar, tooltip positions would need to be manually adjusted again, otherwise the overlap issue will reappear. This becomes brittle over time.

With the proposed approach:

1. Tooltip placement adapts automatically based on an icon’s location (left, right, bottom, etc.)
2. Adding or removing toolbar icons does not require updating tooltip logic
3. Tooltips no longer cover neighboring buttons or dropdown content
4. The UX remains consistent as the toolbar evolves

So the goal here is not complexity for its own sake, but to avoid repeated manual fixes and ensure the tooltip system remains robust as the toolbar changes in the future.

[theAnuragMishra]

You talk about maintainability and scalability but your code is hardcoding the tool tip positions by accessing icons via indexes. I don't know how you make it dynamic if you're only giving different positions to the icons. How you have set up the tooltips is most definitely code smell and not scalable.
Also your comments scream ai but you should at least know what you are pasting.

[stutijain2006]

You talk about maintainability and scalability but your code is hardcoding the tool tip positions by accessing icons via indexes. I don't know how you make it dynamic if you're only giving different positions to the icons. How you have set up the tooltips is most definitely code smell and not scalable. Also your comments scream ai but you should at least know what you are pasting.

According to the current positioning of the toolbar, if some icon will be added in the start of the right side icons, then they will be by default assigned tooltip position to be on the left , and if any of the icon is added in the below tooltip , it will be assigned as bottom , so that is what I am trying to do .
In the same case if we are not doing this, then in case any icon added on the right side, we have to change the tooltip positioning for each and every icon on that side . So fetching by index seems to be a good option.

[theAnuragMishra]

Not really, you have things like icons[1] and left_below_icons[1] which certainly are not dynamic. If anything they look the opposite of dynamic.
Also, I cloned your branch and checked and the default top positioning with a negative margin that you have given doesn't really look nice.
In the original pr, we discussed that a position of bottom with tooltips hiding on click is a good ux. I'd say let's stick to that. It keeps the code minimal and readable.