Summary
The Mics > Availability tab creates one Bootstrap Vue Next (BVN) tooltip DOM node per mic-status cell per scene section — and because the same microphone appears in every scene, this results in a large number of duplicate, hidden tooltip <div> elements appended to <body>.
Observed during verification of #1091: querying document.querySelectorAll('[class*="tooltip"]') on the Availability tab returned 105 tooltip-related elements, with the same tooltip text (e.g. "Mic 1: In use by Pop") appearing 13 times — one per scene that Mic 1 was allocated across.
Root Cause
ResourceAvailability.vue renders a nested v-for:
<!-- outer: one section per scene -->
<div v-for="sceneData in sceneAvailability" :key="`scene-${sceneData.scene.id}`">
<!-- inner: one cell per mic in that scene -->
<div
v-for="micStatus in sceneData.micStatuses"
:key="`mic-${micStatus.mic.id}`"
v-b-tooltip.hover.top="getMicTooltip(micStatus)"
...
>BVN's v-b-tooltip directive mounts a persistent <div class="tooltip b-tooltip ..."> into <body> for every element it is bound to. With N scenes × M mics, this creates N×M tooltip nodes upfront — even though only one is ever shown at a time.
In the test show ("We Will Rock You") with 17 scenes and 1 mic allocated to all of them, this is 17 hidden tooltip elements for the same mic. A production show with 20+ scenes and 10+ mics would generate 200+ hidden tooltip nodes.
Repro Steps
- Navigate to a show with several scenes and at least one mic allocated across many of them
- Open Mics > Availability
- Open browser DevTools console and run:
document.querySelectorAll('[class*="tooltip"]').length
// returns >> N×M×3 (3 elements per tooltip: wrapper, arrow, inner)
- Run:
[...document.querySelectorAll('.tooltip-inner')].map(e => e.textContent)
// shows many duplicate entries for the same mic
Impact
- Unnecessary DOM bloat — scales poorly with show size
- Memory overhead for large productions (many scenes × many mics)
- No visual bug: only one tooltip is ever displayed at a time
Suggested Fix
Replace per-cell v-b-tooltip with a single shared tooltip driven by mouseover/mouseleave events on the grid container, updating a single reactive tooltip value. Alternatively, consider the noninteractive + delay BVN options to limit eager tooltip creation, or restructure the template so mics are not repeated per scene (render once per mic with scene state inline).
Component
client-v3/src/components/show/config/mics/ResourceAvailability.vue
Summary
The Mics > Availability tab creates one Bootstrap Vue Next (BVN) tooltip DOM node per mic-status cell per scene section — and because the same microphone appears in every scene, this results in a large number of duplicate, hidden tooltip
<div>elements appended to<body>.Observed during verification of #1091: querying
document.querySelectorAll('[class*="tooltip"]')on the Availability tab returned 105 tooltip-related elements, with the same tooltip text (e.g."Mic 1: In use by Pop") appearing 13 times — one per scene that Mic 1 was allocated across.Root Cause
ResourceAvailability.vuerenders a nestedv-for:BVN's
v-b-tooltipdirective mounts a persistent<div class="tooltip b-tooltip ...">into<body>for every element it is bound to. With N scenes × M mics, this creates N×M tooltip nodes upfront — even though only one is ever shown at a time.In the test show ("We Will Rock You") with 17 scenes and 1 mic allocated to all of them, this is 17 hidden tooltip elements for the same mic. A production show with 20+ scenes and 10+ mics would generate 200+ hidden tooltip nodes.
Repro Steps
Impact
Suggested Fix
Replace per-cell
v-b-tooltipwith a single shared tooltip driven by mouseover/mouseleave events on the grid container, updating a single reactive tooltip value. Alternatively, consider thenoninteractive+delayBVN options to limit eager tooltip creation, or restructure the template so mics are not repeated per scene (render once per mic with scene state inline).Component
client-v3/src/components/show/config/mics/ResourceAvailability.vue