Feature: Add tooltips for simulator sidebar buttons#857
Feature: Add tooltips for simulator sidebar buttons#857s1dhu98 wants to merge 4 commits intoCircuitVerse:mainfrom
Conversation
WalkthroughThis PR adds tooltip functionality to simulator sidebar buttons across multiple language locales. It introduces title attributes with localized text to button components in both main and v1 versions, adds corresponding translation entries in Bengali, English, and Hindi locale files, and implements CSS hover tooltip styling in the color theme. The tooltips provide labels for icon-only buttons including circuit elements, wiring mode, Verilog panel, copy, paste, properties, and report issue functionality. Possibly related PRs
🚥 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 |
✅ Deploy Preview for circuitverse ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
…tooltips feature
- Added tooltip translations for 7 buttons in English, Hindi, and Bengali - Implemented tooltips on mobile UI buttons (Circuit Elements, Wiring Mode, Verilog Panel, Copy, Paste, Properties) - Added tooltip to Report Issue button - Enhanced tooltip styling with theme-aware colors and shadow effects - Tooltips display on hover without blocking UI functionality - Supports both browser native tooltips and custom CSS-based styling Fixes CircuitVerse#841
s1dhu98
force-pushed
the
sidebar-tooltips-pr
branch
from
8252012 to
b9558eb
Compare
|
@Nihal4777 kindly review this pull request and merge it if possible |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/styles/color_theme.scss`:
- Around line 564-584: The CSS custom tooltip selectors (.cir-btn[title],
.cir-ele-btn[title], .cir-verilog-btn[title], .report-sidebar a[title])
currently use content: attr(title) which causes the native browser tooltip to
also appear; change the CSS to read from a data attribute (e.g., content:
attr(data-tooltip)) and update all Vue template bindings that currently use
title (e.g., :title="..." or title="...") to set a custom attribute instead
(v-bind:data-tooltip="..." or :data-tooltip="..."), and remove the title
attribute so the browser native tooltip is suppressed while preserving the
styled ::after tooltip.
- Around line 556-562: The rule setting position: relative on .cir-btn[title],
.cir-ele-btn[title], .cir-verilog-btn[title], and .report-sidebar a[title]
conflicts with absolute positioning in Extra.vue and breaks floating buttons;
remove the entire CSS block or at minimum stop applying position: relative to
.cir-btn, .cir-ele-btn, and .cir-verilog-btn (keep it only for .report-sidebar
a[title] if needed) so that the absolute-positioned elements in Extra.vue retain
their intended layout and their ::after pseudo-elements continue to use the
correct containing block.
| /* Enhanced tooltips for sidebar and floating buttons */ | ||
| .cir-btn[title], | ||
| .cir-ele-btn[title], | ||
| .cir-verilog-btn[title], | ||
| .report-sidebar a[title] { | ||
| position: relative; | ||
| } |
There was a problem hiding this comment.
position: relative will break absolutely-positioned buttons.
.cir-btn, .cir-ele-btn, and .cir-verilog-btn are styled with position: absolute in Extra.vue to float them on the screen. This rule overrides that to position: relative, which will pull them out of their intended positions and into normal document flow.
Since position: absolute already establishes a containing block for the ::after pseudo-element, the position: relative rule here is both unnecessary and harmful — remove this entire block.
Proposed fix
-/* Enhanced tooltips for sidebar and floating buttons */
-.cir-btn[title],
-.cir-ele-btn[title],
-.cir-verilog-btn[title],
-.report-sidebar a[title] {
- position: relative;
-}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| /* Enhanced tooltips for sidebar and floating buttons */ | |
| .cir-btn[title], | |
| .cir-ele-btn[title], | |
| .cir-verilog-btn[title], | |
| .report-sidebar a[title] { | |
| position: relative; | |
| } |
🤖 Prompt for AI Agents
In `@src/styles/color_theme.scss` around lines 556 - 562, The rule setting
position: relative on .cir-btn[title], .cir-ele-btn[title],
.cir-verilog-btn[title], and .report-sidebar a[title] conflicts with absolute
positioning in Extra.vue and breaks floating buttons; remove the entire CSS
block or at minimum stop applying position: relative to .cir-btn, .cir-ele-btn,
and .cir-verilog-btn (keep it only for .report-sidebar a[title] if needed) so
that the absolute-positioned elements in Extra.vue retain their intended layout
and their ::after pseudo-elements continue to use the correct containing block.
| .cir-btn[title]:hover::after, | ||
| .cir-ele-btn[title]:hover::after, | ||
| .cir-verilog-btn[title]:hover::after, | ||
| .report-sidebar a[title]:hover::after { | ||
| content: attr(title); | ||
| position: absolute; | ||
| bottom: 110%; | ||
| left: 50%; | ||
| transform: translateX(-50%); | ||
| background-color: var(--bg-icons); | ||
| color: var(--text-panel); | ||
| padding: 8px 12px; | ||
| border-radius: 4px; | ||
| font-size: 12px; | ||
| white-space: nowrap; | ||
| z-index: 1000; | ||
| border: 1px solid var(--br-primary); | ||
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); | ||
| font-weight: 500; | ||
| pointer-events: none; | ||
| } No newline at end of file |
There was a problem hiding this comment.
Native browser tooltip will double-up with the CSS ::after tooltip.
Using content: attr(title) creates a custom tooltip via CSS, but the browser will also show its own native tooltip for the title attribute after a short hover delay. This results in two overlapping tooltips.
The standard fix is to use a custom data-* attribute (e.g., data-tooltip) instead of title, and read it via attr(data-tooltip) in CSS. This suppresses the native tooltip while keeping the custom one. You'd update the Vue templates from :title to a custom attribute binding accordingly.
Alternatively, if the intent is to rely on native title tooltips (simplest approach), remove the CSS ::after rules entirely and let the browser handle tooltip rendering — though you lose the custom styling.
🤖 Prompt for AI Agents
In `@src/styles/color_theme.scss` around lines 564 - 584, The CSS custom tooltip
selectors (.cir-btn[title], .cir-ele-btn[title], .cir-verilog-btn[title],
.report-sidebar a[title]) currently use content: attr(title) which causes the
native browser tooltip to also appear; change the CSS to read from a data
attribute (e.g., content: attr(data-tooltip)) and update all Vue template
bindings that currently use title (e.g., :title="..." or title="...") to set a
custom attribute instead (v-bind:data-tooltip="..." or :data-tooltip="..."), and
remove the title attribute so the browser native tooltip is suppressed while
preserving the styled ::after tooltip.
|
Follow pr template and resolve coderabbit bot suggestions before asking for review. |
2 participants
Add tooltips for simulator sidebar buttons with hover labels.
Fixes #841
Summary by CodeRabbit
Release Notes