Fix v-b-tooltip DOM node leak in grid components (#1093)

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

@@ -128,9 +128,10 @@
               <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)"
+                  @mouseenter="showTooltip(getTooltipText(data.item.Character, scene.id), $event)"
+                  @mouseleave="hideTooltip"
                 >
                   {{ allocationByCharacter[data.item.Character]?.[scene.id] }}
                   <IMdiAlert
@@ -147,6 +148,7 @@
       </BCol>
     </BRow>
     <MicAutoPopulateModal ref="autoPopulateModalRef" @auto-populate-result="onAutoPopulateResult" />
+    <BTooltip v-model="tooltipVisible" :target="tooltipTarget" :title="tooltipText" manual />
   </BContainer>
 </template>
 
@@ -156,11 +158,13 @@ import { diff } from 'deep-object-diff';
 import { useShowStore } from '@/stores/show';
 import { useSystemStore } from '@/stores/system';
 import { useStatsTable } from '@/composables/useStatsTable';
+import { useHoverTooltip } from '@/composables/useHoverTooltip';
 import MicAutoPopulateModal from './MicAutoPopulateModal.vue';
 import type { MicConflict } from '@/js/micConflictUtils';
 
 const showStore = useShowStore();
 const systemStore = useSystemStore();
+const { tooltipTarget, tooltipText, tooltipVisible, showTooltip, hideTooltip } = useHoverTooltip();
 const { sortedActs, sortedScenes, numScenesPerAct, getHeaderName, getCellName } = useStatsTable();
 
 const selectedMic = ref<number | null>(null);

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

@@ -67,9 +67,10 @@
             <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"
+              @mouseenter="showTooltip(getMicTooltip(micStatus), $event)"
+              @mouseleave="hideTooltip"
             >
               <div class="mic-name">{{ micStatus.mic.name ?? `Mic ${micStatus.mic.id}` }}</div>
               <div v-if="micStatus.character" class="mic-character">
@@ -81,11 +82,13 @@
       </div>
     </div>
   </div>
+  <BTooltip v-model="tooltipVisible" :target="tooltipTarget" :title="tooltipText" manual />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useShowStore } from '@/stores/show';
+import { useHoverTooltip } from '@/composables/useHoverTooltip';
 import type { Scene, Character } from '@/types/api/show';
 import type { Microphone } from '@/types/api/microphones';
 
@@ -107,6 +110,7 @@ interface SceneAvailability {
 withDefaults(defineProps<{ loading?: boolean }>(), { loading: false });
 
 const showStore = useShowStore();
+const { tooltipTarget, tooltipText, tooltipVisible, showTooltip, hideTooltip } = useHoverTooltip();
 
 const scenes = computed(() => showStore.micTimelineData.scenes);
 const microphones = computed(() => showStore.micTimelineData.microphones);

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

@@ -57,14 +57,18 @@
               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',
                 }"
+                @mouseenter="
+                  showTooltip(
+                    `${sceneData.scene.name}: ${sceneData.micCount} microphone${sceneData.micCount !== 1 ? 's' : ''}`,
+                    $event
+                  )
+                "
+                @mouseleave="hideTooltip"
               >
                 <span class="mic-count">{{ sceneData.micCount }}</span>
               </div>
@@ -86,11 +90,13 @@
       </div>
     </div>
   </div>
+  <BTooltip v-model="tooltipVisible" :target="tooltipTarget" :title="tooltipText" manual />
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useShowStore } from '@/stores/show';
+import { useHoverTooltip } from '@/composables/useHoverTooltip';
 import type { Scene } from '@/types/api/show';
 
 interface SceneDensityEntry {
@@ -107,6 +113,7 @@ interface ActDensityGroup {
 withDefaults(defineProps<{ loading?: boolean }>(), { loading: false });
 
 const showStore = useShowStore();
+const { tooltipTarget, tooltipText, tooltipVisible, showTooltip, hideTooltip } = useHoverTooltip();
 
 const maxBarHeight = 200;
 const minBarHeight = 20;

client-v3/src/composables/useHoverTooltip.ts

@@ -0,0 +1,19 @@
+import { ref } from 'vue';
+
+export function useHoverTooltip() {
+  const tooltipTarget = ref<HTMLElement | null>(null);
+  const tooltipText = ref('');
+  const tooltipVisible = ref(false);
+
+  function showTooltip(text: string, event: MouseEvent): void {
+    tooltipTarget.value = event.currentTarget as HTMLElement;
+    tooltipText.value = text;
+    tooltipVisible.value = true;
+  }
+
+  function hideTooltip(): void {
+    tooltipVisible.value = false;
+  }
+
+  return { tooltipTarget, tooltipText, tooltipVisible, showTooltip, hideTooltip };
+}