fix: tooltip misalignment in Elements Panel when panel position changes#973
fix: tooltip misalignment in Elements Panel when panel position changes#973Nihal4777 merged 2 commits intoCircuitVerse:mainfrom
Conversation
✅ Deploy Preview for circuitverse ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThe ElementsPanel.vue template moves the tooltip Help div to a different location in the DOM. The element no longer uses the 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/Panels/ElementsPanel/ElementsPanel.vue (1)
133-138: Consider<Teleport to="body">for a more robust fixMoving the div outside the draggable panel works for now, but the tooltip's effective position still depends on where
ElementsPanelitself is rendered. Aposition: fixedelement is only placed relative to the viewport when no ancestor element has atransform,perspective, orfilterproperty set. If the panel is ever nested inside such a container, the misalignment will recur.Vue 3's
<Teleport>renders content in a different part of the DOM tree while keeping the component's logic and state, and is particularly useful for tooltips that need to escape their parent component's scope. Wrapping#Helpin<Teleport to="body">guarantees it's always a direct child of<body>, regardless of the component hierarchy.♻️ Proposed refactor using
<Teleport to="body">- <div - id="Help" - :class="tooltipText !== 'null'? 'show': ''" - > - {{ tooltipText }} - </div> + <Teleport to="body"> + <div + id="Help" + :class="tooltipText !== 'null' ? 'show' : ''" + > + {{ tooltipText }} + </div> + </Teleport>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Panels/ElementsPanel/ElementsPanel.vue` around lines 133 - 138, Wrap the existing tooltip div (id="Help", uses tooltipText and :class) in a Vue 3 <Teleport to="body"> so the tooltip DOM is rendered as a direct child of body; preserve the same bindings ({{ tooltipText }} and :class="tooltipText !== 'null' ? 'show' : ''") and any event handlers, and keep the tooltip positioning (position: fixed) in CSS — this ensures the tooltip escapes any transformed ancestor and the reactive tooltipText from ElementsPanel remains functional while the element is mounted under body.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/Panels/ElementsPanel/ElementsPanel.vue`:
- Around line 133-138: The v1 ElementsPanel component uses a loose inequality
when checking tooltipText (the Help div uses :class="tooltipText != 'null'?
'show': ''"); update the check to strict equality so it uses !== instead (i.e.,
:class="tooltipText !== 'null' ? 'show' : ''") in
v1/src/components/Panels/ElementsPanel/ElementsPanel.vue, mirroring the change
made in src's ElementsPanel.vue; target the Help div and the tooltipText binding
to ensure both folders use strict comparison.
- Around line 133-138: In v1's ElementsPanel.vue update the tooltip element with
id "Help": move the <div id="Help"> so it sits outside the main draggable
panel's closing </div> (preventing transform inheritance), change the class
binding from :class="tooltipText != 'null'? 'show': ''" to use strict inequality
:class="tooltipText !== 'null'? 'show': ''", and remove the obsolete lines="one"
attribute; ensure the div still renders {{ tooltipText }} and retains the
position: fixed styling in CSS.
---
Nitpick comments:
In `@src/components/Panels/ElementsPanel/ElementsPanel.vue`:
- Around line 133-138: Wrap the existing tooltip div (id="Help", uses
tooltipText and :class) in a Vue 3 <Teleport to="body"> so the tooltip DOM is
rendered as a direct child of body; preserve the same bindings ({{ tooltipText
}} and :class="tooltipText !== 'null' ? 'show' : ''") and any event handlers,
and keep the tooltip positioning (position: fixed) in CSS — this ensures the
tooltip escapes any transformed ancestor and the reactive tooltipText from
ElementsPanel remains functional while the element is mounted under body.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
v1/src/components/Panels/ElementsPanel/ElementsPanel.vue (1)
133-138: Consider<Teleport to="body">to guarantee viewport-level tooltip rendering.The
#Helpelement usesposition: fixedand is currently rendered within ElementsPanel's component tree. However, ElementsPanel applies CSStransform: translate(x, y)during dragging (via interact.js in drag.ts). According to CSS specifications, when an ancestor element has atransformproperty, it creates a new stacking/containing block context forposition: fixeddescendants—meaning the tooltip will be positioned relative to the transformed panel, not the viewport, causing misalignment.Vue 3's
<Teleport>component is the idiomatic solution: it renders content outside the component tree (to<body>), bypassing CSS transform ancestors entirely and guaranteeing correct viewport-level positioning.♻️ Proposed refactor using
<Teleport>- <div - id="Help" - :class="tooltipText !== 'null' ? 'show' : ''" - > - {{ tooltipText }} - </div> + <Teleport to="body"> + <div + id="Help" + :class="tooltipText !== 'null' ? 'show' : ''" + > + {{ tooltipText }} + </div> + </Teleport>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@v1/src/components/Panels/ElementsPanel/ElementsPanel.vue` around lines 133 - 138, The tooltip div with id "Help" in ElementsPanel is currently inside the transformed panel and thus its position:fixed can be scoped to that transform; wrap that div in a Vue 3 <Teleport to="body"> so the element is rendered at the document body (viewport) level instead of inside the component tree—preserve the existing :class binding and content (tooltipText) and ensure the Teleport is only mounted when tooltipText !== 'null' (same condition used today) so the tooltip appears and disappears the same way; this fixes the issue caused by drag.ts / interact.js applying transforms to ancestor elements.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@v1/src/components/Panels/ElementsPanel/ElementsPanel.vue`:
- Around line 133-138: The tooltip div with id "Help" in ElementsPanel is
currently inside the transformed panel and thus its position:fixed can be scoped
to that transform; wrap that div in a Vue 3 <Teleport to="body"> so the element
is rendered at the document body (viewport) level instead of inside the
component tree—preserve the existing :class binding and content (tooltipText)
and ensure the Teleport is only mounted when tooltipText !== 'null' (same
condition used today) so the tooltip appears and disappears the same way; this
fixes the issue caused by drag.ts / interact.js applying transforms to ancestor
elements.
|
LGTM ready for review @Nihal4777 @tachyons |
Nihal4777
left a comment
Nihal4777
left a comment
There was a problem hiding this comment.
Thanks @Prathamesh0901 for the fix.
3 participants
Fixes #972
Describe the changes you have made in this PR -
This PR fixes the tooltip misalignment issue in the Elements Panel.
Previously, the tooltip (#Help div) was rendered inside the draggable panel container. Since the panel position changes dynamically, the tooltip inherited its positioning context, causing inconsistent placement when the panel was moved.
I moved the tooltip element outside the draggable container so it is no longer affected by the panel’s positioning logic. This ensures stable and consistent rendering regardless of panel movement.
No functional logic was modified, only the DOM structure was adjusted.
Screenshots of the UI changes (If any) -
Code Understanding and AI Usage
Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?
If you used AI assistance:
Explain your implementation approach:
The issue occurred because the tooltip element was nested inside a draggable container. When the panel was repositioned, the tooltip inherited the panel’s positioning context, resulting in inconsistent rendering.
Instead of adjusting offsets or recalculating coordinates, I modified the DOM structure so that the tooltip is rendered outside the draggable container. This isolates it from panel movement logic and ensures consistent behavior.
Checklist before requesting a review
Note: Please check Allow edits from maintainers if you would like us to assist in the PR.
Summary by CodeRabbit