feat: add tooltips for simulator sidebar buttons

- 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 #841

Author: s1dhu98

src/components/Extra.vue

@@ -183,6 +183,7 @@
       @mousedown="simulatorMobileStore.showElementsPanel = !simulatorMobileStore.showElementsPanel"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem'}"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
+      :title="$t('simulator.tooltip.circuit_elements')"
     >
         <i class="fas fa-bezier-curve"></i>
     </v-btn>
@@ -202,6 +203,7 @@
       }"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '10rem' : '2rem', backgroundColor: selectMultiple ? 'var(--primary)' : 'var(--bg-toggle-btn-primary)'}"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isVerilog"
+      :title="$t('simulator.tooltip.wiring_mode')"
     >
         <i class="fa-solid fa-vector-square"></i>
     </v-btn>
@@ -210,6 +212,7 @@
       class="cir-verilog-btn"
       @mousedown="simulatorMobileStore.showVerilogPanel = !simulatorMobileStore.showVerilogPanel"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.isVerilog && simulatorMobileStore.showMobileView"
+      :title="$t('simulator.tooltip.verilog_panel')"
     >
         <i class="fa-solid fa-gears"></i>
     </v-btn>
@@ -219,6 +222,7 @@
       @mousedown="copyBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && !simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      :title="$t('simulator.tooltip.copy')"
     >
         <i class="fa-solid fa-copy"></i>
     </v-btn>
@@ -228,6 +232,7 @@
       @mousedown="pasteBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? '16rem' : '8rem'}"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView && simulatorMobileStore.isCopy && !simulatorMobileStore.isVerilog"
+      :title="$t('simulator.tooltip.paste')"
     >
         <i class="fa-solid fa-paste"></i>
     </v-btn>
@@ -237,6 +242,7 @@
       @mousedown="propertiesBtnClick()"
       :style="{bottom: simulatorMobileStore.showElementsPanel ? `${propertiesPanelPos.up}rem` : `${propertiesPanelPos.down}rem`}"
       v-if="simulatorMobileStore.showMobileButtons && simulatorMobileStore.showMobileView"
+      :title="$t('simulator.tooltip.properties')"
     >
         <i class="fa-solid fa-sliders"></i>
     </v-btn>

src/components/ReportIssue/ReportIssueButton.vue

@@ -7,6 +7,7 @@
             data-target=".issue"
             :style="{ bottom: simulatorMobileStore.showElementsPanel ? '250px' : '120px' }"
             @click="openReportingModal"
+            :title="$t('simulator.tooltip.report_issue')"
         >
             <span class="fa fa-bug"></span>&nbsp;&nbsp;{{
                 $t('simulator.report_issue')

src/locales/bn.json

@@ -145,7 +145,14 @@
             "pause_timing_diagram": "টাইমিং ডায়াগ্রামকে বিরত রাখুন",
             "decrease_width": "প্রস্থ কমান",
             "increase_width": "প্রস্থ বাড়ান",
-            "reset": "পুনরায় সেট করুন"
+            "reset": "পুনরায় সেট করুন",
+            "circuit_elements": "সার্কিট উপাদান",
+            "wiring_mode": "ওয়্যারিং মোড",
+            "verilog_panel": "ভেরিলগ প্যানেল",
+            "copy": "কপি করুন",
+            "paste": "পেস্ট করুন",
+            "properties": "বৈশিষ্ট্য",
+            "report_issue": "সমস্যার রিপোর্ট করুন"
         }
     }
 }

src/locales/en.json

@@ -161,7 +161,14 @@
             "pause_timing_diagram": "Pause Timing Diagram",
             "decrease_width": "Decrease Width",
             "increase_width": "Increase Width",
-            "reset": "Reset"
+            "reset": "Reset",
+            "circuit_elements": "Circuit Elements",
+            "wiring_mode": "Wiring Mode",
+            "verilog_panel": "Verilog Panel",
+            "copy": "Copy",
+            "paste": "Paste",
+            "properties": "Properties",
+            "report_issue": "Report an Issue"
         }
     }
 }

src/locales/hi.json

@@ -161,7 +161,14 @@
             "pause_timing_diagram": "टाइमिंग डायग्राम को पॉज करें",
             "decrease_width": "चौड़ाई घटाएं",
             "increase_width": "चौड़ाई बढ़ाएँ",
-            "reset": "रिसेट करें"
+            "reset": "रिसेट करें",
+            "circuit_elements": "सर्किट तत्व",
+            "wiring_mode": "वायरिंग मोड",
+            "verilog_panel": "वेरिलॉग पैनल",
+            "copy": "कॉपी",
+            "paste": "पेस्ट",
+            "properties": "गुण",
+            "report_issue": "समस्या की रिपोर्ट करें"
         }
     }
 }

src/styles/color_theme.scss

@@ -553,3 +553,32 @@ select {
     border: 1px solid var(--br-primary);
     color: var(--text-panel);
 }
+/* Enhanced tooltips for sidebar and floating buttons */
+.cir-btn[title],
+.cir-ele-btn[title],
+.cir-verilog-btn[title],
+.report-sidebar a[title] {
+    position: relative;
+}
+
+.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;
+}