PB-1384 Fix tippy instatiation on layer list item

packages/mapviewer/src/modules/menu/components/activeLayers/MenuActiveLayersListItem.vue

@@ -6,7 +6,7 @@
 
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import log from 'geoadmin/log'
-import { computed, onMounted, ref, toRefs } from 'vue'
+import { computed, onMounted, ref, toRefs, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 
@@ -62,7 +62,7 @@ const emit = defineEmits(['showLayerDescriptionPopup', 'toggleLayerDetail', 'mov
 const store = useStore()
 const { t } = useI18n()
 
-useTippyTooltip('.menu-layer-item [data-tippy-content]')
+const menuLayerItem = useTemplateRef('menuLayerItem')
 
 const layerUpButton = ref(null)
 const layerDownButton = ref(null)
@@ -107,6 +107,11 @@ const showSpinner = computed(
     () => layer.value.isLoading && layer.value.isExternal && !layer.value.hasError
 )
 
+const elements = () => menuLayerItem.value.querySelectorAll('[data-tippy-content]')
+useTippyTooltip(elements, {
+    source: 'MenuActiveLayersListItem',
+})
+
 onMounted(() => {
     if (showLayerDetail.value) {
         if (focusMoveButton.value === 'up') {
@@ -201,10 +206,7 @@ function changeStyle(newStyle) {
             >
                 {{ layer.name }}
             </TextTruncate>
-            <ZoomToExtentButton
-                v-if="layer.extent"
-                :extent="layer.extent"
-            />
+            <ZoomToExtentButton v-if="layer.extent" :extent="layer.extent" />
             <button
                 v-if="showSpinner"
                 class="loading-button btn border-0 d-flex align-items-center"
@@ -214,10 +216,7 @@ function changeStyle(newStyle) {
                 data-tippy-content="loading_external_layer"
                 :data-cy="`button-loading-metadata-spinner-${id}-${index}`"
             >
-                <FontAwesomeIcon
-                    icon="spinner"
-                    pulse
-                />
+                <FontAwesomeIcon icon="spinner" pulse />
             </button>
             <ErrorButton
                 v-else-if="layer.hasError"
@@ -263,15 +262,9 @@ function changeStyle(newStyle) {
                 <FontAwesomeIcon icon="cog" />
             </button>
         </div>
-        <div
-            v-show="showLayerDetail"
-            :data-cy="`div-layer-settings-${id}-${index}`"
-        >
+        <div v-show="showLayerDetail" :data-cy="`div-layer-settings-${id}-${index}`">
             <div class="d-flex mx-1 align-items-center">
-                <label
-                    :for="`transparency-${id}`"
-                    class="menu-layer-options"
-                >
+                <label :for="`transparency-${id}`" class="menu-layer-options">
                     {{ t('transparency') }}
                 </label>
                 <input
@@ -286,7 +279,7 @@ function changeStyle(newStyle) {
                     :data-cy="`slider-transparency-layer-${id}-${index}`"
                     @mouseup="onTransparencyCommit"
                     @input="debounceTransparencyChange"
-                >
+                />
                 <div class="btn-group">
                     <button
                         v-if="hasMultipleTimestamps"
@@ -329,15 +322,8 @@ function changeStyle(newStyle) {
                     </button>
                 </div>
             </div>
-            <div
-                v-if="isLayerKml"
-                v-show="showLayerDetail"
-                class="p-1 d-block"
-            >
-                <div
-                    v-if="is3dActive"
-                    class="form-check form-switch"
-                >
+            <div v-if="isLayerKml" v-show="showLayerDetail" class="p-1 d-block">
+                <div v-if="is3dActive" class="form-check form-switch">
                     <label
                         class="menu-layer-options me-2 form-check-label"
                         :for="`checkbox-clamp-to-ground-${id}`"
@@ -349,12 +335,9 @@ function changeStyle(newStyle) {
                         v-model="isLayerClampedToGround"
                         type="checkbox"
                         class="form-check-input"
-                    >
+                    />
                 </div>
-                <div
-                    v-else
-                    class="d-flex align-items-center"
-                >
+                <div v-else class="d-flex align-items-center">
                     <label class="menu-layer-options me-2">
                         {{ t('vector_feedback_select_style') }}
                     </label>