fix: show tooltips on simulator hover

[Teesta-Mukherjee]

Fixes ##841

Describe the changes you have made in this PR -

Added a hover-based tooltip overlay for simulator elements

• Tooltip displays the existing tooltipText of elements near the cursor
• Tooltip hides automatically when the cursor leaves the element or canvas
• Changes are scoped to the simulator canvas without affecting simulation logic

Screenshots of the UI changes (If any) -

before after ---

Code Understanding and AI Usage

Did you use AI assistance (ChatGPT, Claude, Copilot, etc.) to write any part of this code?

• No, I wrote all the code myself
• [ x ] Yes, I used AI assistance (continue below)

If you used AI assistance:

• [ x ] I have reviewed every single line of the AI-generated code
• [ x ] I can explain the purpose and logic of each function/component I added
• [ x ] I have tested edge cases and understand how the code handles them
• [ x ] I have modified the AI output to follow this project's coding standards and conventions

Explain your implementation approach:

---

Checklist before requesting a review

• [ x ] I have added proper PR title and linked to the issue
• [ x ] I have performed a self-review of my code
• [ x ] I can explain the purpose of every function, class, and logic block I added
• [ x ] I understand why my changes work and have tested them thoroughly
• [ x ] I have considered potential edge cases and how my code handles them
• If it is a core feature, I have added thorough tests
• [ x ] My code follows the project's style guidelines and conventions

---

Note: Please check Allow edits from maintainers if you would like us to assist in the PR.

Summary by CodeRabbit

• New Features

  • Added interactive tooltips that display contextual information when hovering over canvas elements, positioning dynamically near the cursor.

• Accessibility

  • Enhanced mobile action buttons with descriptive title attributes for better user guidance and accessibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	91d8a0d
🔍 Latest deploy log	https://app.netlify.com/projects/circuitverse/deploys/69721b06034faa00089b2310
😎 Deploy Preview	https://deploy-preview-844--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 43 (🟢 up 1 from production) Accessibility: 73 (no change from production) Best Practices: 92 (no change from production) SEO: 82 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

This pull request modifies src/components/Extra.vue to add tooltip functionality to the canvas area. The changes include adding hover event handlers that display contextual tooltips near the cursor when hovering over elements with tooltipText properties, and hiding them on mouseleave. A new reactive tooltip state object was introduced to manage visibility, text content, and positioning coordinates. The stylesheet was updated with a positioning hook for .canvasArea, and title attributes were added to several mobile action buttons for improved accessibility. The implementation retains existing pan interaction handling.

Possibly related PRs

• feat(gsoc'24): Mobile view Implementation for vue simulator #361: Modifies the same src/components/Extra.vue file with canvas interaction and mobile button enhancements, complementing the tooltip and accessibility improvements.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: adding tooltip display on hover in the simulator, which aligns with the main feature implemented in Extra.vue.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/components/Extra.vue`:
- Around line 122-139: The handler for `@mousemove` is writing raw event offsets
into simulationArea.mouseX and mouseY which desyncs hover/tooltip under
pan/zoom; instead convert e.offsetX/e.offsetY into grid-space (reuse the
existing panMove coordinate conversion or call panMove-like logic) before
assigning to simulationArea.mouseX and simulationArea.mouseY so hover detection
uses grid coordinates; keep the tooltip update logic the same (tooltip.x/y can
remain based on screen offsets) and ensure simulationArea.touch remains false
and hovered lookup still uses simulationArea.hover.

In `@src/simulator/src/listeners.js`:
- Around line 791-888: The module fails to import the Tauri event listener so
initDesktopAppListeners() early-returns and no desktop menu handlers are
registered; import the Tauri listen function (used by the listen(...) calls
inside initDesktopAppListeners) from '@tauri-apps/api/event' so the typeof
listen check is valid and the 30+ listeners (e.g., 'new-project', 'save-online',
'export-verilog', etc.) are actually registered; add the import for listen at
the top of the file and keep the existing guard that checks window.__TAURI__ and
typeof listen === 'function'.

[github-advanced-security]

ESLint found more than 20 potential problems in the proposed changes. Check the Files changed tab for more details.

[Teesta-Mukherjee]

hello @tachyons @ThatDeparted2061 @Nihal4777 this is ready to be reviewed

[naman79820]

@Teesta-Mukherjee Can you please add a screen cast. Thank you :))

[Teesta-Mukherjee]

@naman79820 I added a sceernshot.What is a screen cast? Can you please let me know?
:) thankyou

[naman79820]

@naman79820 I added a sceernshot.What is a screen cast? Can you please let me know?
:) thankyou

Video I mean :))