Fix V3 UI tooltip rendering (closes #1091) (#1094)

Replace native HTML title attributes with v-b-tooltip directive throughout
client-v3 to restore Bootstrap-styled tooltips. Replace the plain "?" text
span in ConfigSettings with IMdiHelpCircle icon, and restore the missing
help icon on the Browser Console Log Level setting in UserSettingsConfig.

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Tim020

client-v3/e2e/tests/03-system-config.spec.ts

@@ -245,7 +245,9 @@ test('can open the View Clients modal', async () => {
 
 test('switches to the Logs tab and can change source', async () => {
   await page.click('.nav-link:has-text("Logs")');
-  await expect(page.locator('text=Server').first()).toBeVisible({ timeout: 10_000 });
+  await expect(page.locator('.tab-pane.active label').filter({ hasText: /^Server$/ })).toBeVisible({
+    timeout: 10_000,
+  });
   // Switch to Client logs — Bootstrap btn-check inputs have pointer-events:none; click the label
   await page
     .locator('.tab-pane.active label')

client-v3/src/components/config/ConfigSettings.vue

@@ -43,14 +43,12 @@
                     <template #label>
                       <span>
                         {{ setting.display_name !== '' ? setting.display_name : key }}
-                        <span
+                        <IMdiHelpCircle
                           v-if="setting.help_text !== ''"
-                          :id="`${key}-help-icon`"
+                          v-b-tooltip.hover.top="setting.help_text"
                           class="text-muted ms-1"
                           style="cursor: help"
-                          :title="setting.help_text"
-                          >?</span
-                        >
+                        />
                       </span>
                     </template>
                     <BFormSelect

client-v3/src/components/show/config/mics/MicAllocations.vue

@@ -128,9 +128,9 @@
               <template v-else>
                 <div
                   v-if="allocationByCharacter[data.item.Character]?.[scene.id] != null"
+                  v-b-tooltip.hover.top="getTooltipText(data.item.Character, scene.id)"
                   class="allocation-cell"
                   :class="getConflictClassForCell(data.item.Character, scene.id)"
-                  :title="getTooltipText(data.item.Character, scene.id)"
                 >
                   {{ allocationByCharacter[data.item.Character]?.[scene.id] }}
                   <IMdiAlert

client-v3/src/components/show/config/mics/MicTimeline.vue

@@ -28,7 +28,12 @@
             By Cast
           </BButton>
         </BButtonGroup>
-        <BButton size="sm" variant="outline-secondary" title="Export as PNG" @click="handleExport">
+        <BButton
+          v-b-tooltip.hover.top="'Export as PNG'"
+          size="sm"
+          variant="outline-secondary"
+          @click="handleExport"
+        >
           <IMdiDownload /> Export
         </BButton>
       </div>

client-v3/src/components/show/config/mics/ResourceAvailability.vue

@@ -67,9 +67,9 @@
             <div
               v-for="micStatus in sceneData.micStatuses"
               :key="`mic-${micStatus.mic.id}`"
+              v-b-tooltip.hover.top="getMicTooltip(micStatus)"
               class="mic-status-item"
               :class="micStatus.statusClass"
-              :title="getMicTooltip(micStatus)"
             >
               <div class="mic-name">{{ micStatus.mic.name ?? `Mic ${micStatus.mic.id}` }}</div>
               <div v-if="micStatus.character" class="mic-character">

client-v3/src/components/show/config/mics/SceneDensityHeatmap.vue

@@ -57,12 +57,14 @@
               class="scene-bar-wrapper"
             >
               <div
+                v-b-tooltip.hover.top="
+                  `${sceneData.scene.name}: ${sceneData.micCount} microphone${sceneData.micCount !== 1 ? 's' : ''}`
+                "
                 class="scene-bar"
                 :style="{
                   backgroundColor: getDensityColor(sceneData.micCount),
                   height: getBarHeight(sceneData.micCount) + 'px',
                 }"
-                :title="`${sceneData.scene.name}: ${sceneData.micCount} microphone${sceneData.micCount !== 1 ? 's' : ''}`"
               >
                 <span class="mic-count">{{ sceneData.micCount }}</span>
               </div>

client-v3/src/components/show/config/stage/CrewTimeline.vue

@@ -6,7 +6,12 @@
     <div v-else class="timeline-wrapper">
       <div class="timeline-controls-bar">
         <span class="text-light small">Crew Assignments</span>
-        <BButton size="sm" variant="outline-secondary" title="Export as PNG" @click="handleExport">
+        <BButton
+          v-b-tooltip.hover.top="'Export as PNG'"
+          size="sm"
+          variant="outline-secondary"
+          @click="handleExport"
+        >
           <IMdiDownload />
         </BButton>
       </div>

client-v3/src/components/show/config/stage/StageTimeline.vue

@@ -30,9 +30,9 @@
             </BButton>
           </BButtonGroup>
           <BButton
+            v-b-tooltip.hover.top="'Export as PNG'"
             size="sm"
             variant="outline-secondary"
-            title="Export as PNG"
             @click="handleExport"
           >
             <IMdiDownload />

client-v3/src/components/show/live/StageManagerPane.vue

@@ -29,7 +29,7 @@
               {{ getSceneDisplayName(scene) }}
             </span>
             <span class="scene-badges d-flex align-items-center gap-1">
-              <IMdiPin v-if="pinnedScenes[scene.id]" title="Pinned" />
+              <IMdiPin v-if="pinnedScenes[scene.id]" v-b-tooltip.hover.top="'Pinned'" />
               <BBadge v-if="scene.id === currentSceneId" variant="success" pill>Current</BBadge>
               <BBadge v-else-if="scene.id === nextSceneId" variant="primary" pill>Next</BBadge>
             </span>

client-v3/src/components/user/settings/UserSettingsConfig.vue

@@ -61,11 +61,17 @@
               />
             </BFormGroup>
 
-            <BFormGroup
-              label-cols="4"
-              label="Browser Console Log Level"
-              label-for="console-log-level-input"
-            >
+            <BFormGroup label-cols="4" label-for="console-log-level-input">
+              <template #label>
+                Browser Console Log Level
+                <IMdiHelpCircle
+                  v-b-tooltip.hover.top="
+                    'Controls which log messages appear in your browser\'s developer console.'
+                  "
+                  class="text-muted ms-1"
+                  style="cursor: help"
+                />
+              </template>
               <BFormSelect
                 id="console-log-level-input"
                 v-model="state.console_log_level"