fix: tooltip overlap in vertical math sidebar & restore missing icon

[shinyu0430]

1. Tooltip Overlap Issue
   After switching the math formula sidebar from horizontal to vertical, the tooltip overlaps with other elements(Screenshot 1). Since there's an "overflow-x / overflow-y problem" (reference link), simply setting overflow-x: visible didn’t fix it. So, I built a new tooltip component that avoids this overflow issue and displays correctly.

• Before:
  

• After:
  

2. Restore Missing Icon
   An icon was accidentally commented out. This PR restores the missing icon(src/lib/tabs/math/relation.js).

[WendellLiu]

Let's talk about the design of tooltip.

First, for a11y, please consider this example as your design spec.

<button aria-describedby="tooltip-1">Help</button>
<div id="tooltip-1" role="tooltip" hidden>Tooltip content here</div>

Second, do we want to have a tooltip "with" button, or a tooltip for "everything"? If we'd like to go for first, we should make an internal piece of our button component. In this case, the trigger component is Tab, so we could also consider have our own Tab with Tooltip support inside.

Third, we should use portal carefully, since portal component will be out of context of the trigger component, which might lead more issue potentially. Could we design the interface like

<Tooltip>
  <Tab />
</Tooltip>

This could also avoid accessing trigger component by event instance, which is not straightforward to me.

Then, I think the current interface exposes too much. For example, we should only have position as enum like Position:: LEFT | RIGHT | TOP | BUTTOM instead of an actual number. The useTooltip should be private module for Tooltip, instead of a public one, no reason to share this hook for others after all. And, please always consider to leverage children for semantic usage like text in our case.

We can discuss this in our bi-weekly sync if you'd like.

[shinyu0430]

@WendellLiu Thank you for the suggestion! I’ve completed the refactor. Please let me know if anything else needs to be updated.

• Wrapped elements in EditIconsTab with Tooltip for better integration
• Replaced ReactDOM.createPortal with direct positioning in Tooltip
• Simplified tooltip logic using cloneElement for event handling
• Removed the useTooltip hook and centralized the tooltip logic
• Added aria-describedby and role="tooltip" for a11y compliance
• Tooltip now uses enum-based position values (e.g., top, right, etc.)

[WendellLiu]

1. Since it's a shared component, could we port it to components/core/ ?
2. Do we actually need to calculate the left and top? Could we implement with absolute-relative positioning system with relative left and top like 0%, 100%, ...etc. If we are able to do so, we don't need ref from children anymore.

[shinyu0430]

@WendellLiu Thank you for the suggestion!

1. Sure, updated!
2. I agree that calculating the distance is not the most ideal approach. However, due to the "overflow-x / overflow-y problem" (reference link), I believe it’s not possible for mathTabList to have both a vertical scrollbar and a tooltip that appears outside the section (without using position: fixed) at the same time.

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.(from reference link)

If we’d like to keep the tooltip behavior straightforward (using absolute-relative positioning), we might need to consider redesigning the mathTabList UI. Perhaps there’s an alternative way to present the math syntax tab outside the current area, which would help avoid the overflow-x issue. Please let me know if you have any suggestions or thoughts. Thanks a lot!

[WendellLiu]

I understand. The issue is that we have some sub-layouts, but we want to show tooltips over them. I'm not fully sure about the root cause, but it seems complex enough to require an ad-hoc solution.