Unify tooltips

Author: m-mohr

src/components/GlobalDataPanel.vue

@@ -79,7 +79,7 @@ const handleLocationSelected = (place: PlaceResult) => {
         </v-alert>
         <h3 class="group">
           Confidence Threshold: {{ settings.threshold }}%
-          <v-tooltip max-width="360" location="top">
+          <v-menu open-on-hover :close-on-content-click="false" max-width="360">
             <template #activator="{ props }">
               <v-icon
                 class="ml-2"
@@ -88,12 +88,12 @@ const handleLocationSelected = (place: PlaceResult) => {
                 v-bind="props"
               ></v-icon>
             </template>
-            <span
-              >Only show fields where the model's confidence meets this threshold. Higher values
+            <v-sheet class="pa-3 text-body-2">
+              Only show fields where the model's confidence meets this threshold. Higher values
               show fewer, more certain fields; lower values show more fields, including less certain
-              ones.</span
-            >
-          </v-tooltip>
+              ones.
+            </v-sheet>
+          </v-menu>
         </h3>
         <v-slider
           v-model.number="settings.threshold"
@@ -146,7 +146,7 @@ const handleLocationSelected = (place: PlaceResult) => {
         />
         <h3 class="group legend">
           Legend
-          <v-tooltip max-width="360" location="top">
+          <v-menu open-on-hover :close-on-content-click="false" max-width="360">
             <template #activator="{ props }">
               <v-icon
                 class="ml-2"
@@ -155,11 +155,11 @@ const handleLocationSelected = (place: PlaceResult) => {
                 v-bind="props"
               ></v-icon>
             </template>
-            <span
-              >Zoomed out, the map shows <strong>field density</strong> (fields per area). Zoom in
-              to see individual fields colored by the model's <strong>confidence</strong>.</span
-            >
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              Zoomed out, the map shows <strong>field density</strong> (fields per area). Zoom in
+              to see individual fields colored by the model's <strong>confidence</strong>.
+            </v-sheet>
+          </v-menu>
         </h3>
         <MapLegend />
       </v-col>

src/components/ProcessingPanel.vue

@@ -476,7 +476,7 @@ defineExpose({ openModelSelection })
             <v-radio v-for="model in availableModels" :key="model.id" :value="model.id" color="teal"
               ><template v-slot:label>
                 {{ model.title }}
-                <v-tooltip v-if="model.description" max-width="400" open-on-click>
+                <v-menu v-if="model.description" open-on-hover :close-on-content-click="false" max-width="400">
                   <template #activator="{ props }">
                     <v-icon
                       class="ml-1"
@@ -485,7 +485,7 @@ defineExpose({ openModelSelection })
                       v-bind="props"
                     ></v-icon>
                   </template>
-                  <div>
+                  <v-sheet class="pa-3 text-body-2">
                     <template v-if="model.version"
                       ><strong>Version:</strong> {{ model.version }}<br
                     /></template>
@@ -496,8 +496,8 @@ defineExpose({ openModelSelection })
                         {{ model.description }}
                       </div>
                     </template>
-                  </div>
-                </v-tooltip>
+                  </v-sheet>
+                </v-menu>
                 <v-badge
                   v-if="model.legacy"
                   inline
@@ -950,12 +950,8 @@ defineExpose({ openModelSelection })
             ></v-badge>
           </span>
           <v-spacer></v-spacer>
-          <v-tooltip
-            v-if="activeTileId"
-            :text="stacPreviewTileId === activeTileId ? 'Hide scene A image' : 'Show scene A image'"
-            open-on-click
-          >
-            <template v-slot:activator="{ props }">
+          <v-menu v-if="activeTileId" open-on-hover :close-on-content-click="false">
+            <template #activator="{ props }">
               <v-btn
                 v-bind="props"
                 :icon="stacPreviewTileId === activeTileId ? mdiEyeOutline : mdiEyeOffOutline"
@@ -965,7 +961,10 @@ defineExpose({ openModelSelection })
                 "
               ></v-btn>
             </template>
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              {{ stacPreviewTileId === activeTileId ? 'Hide scene A image' : 'Show scene A image' }}
+            </v-sheet>
+          </v-menu>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
           <div class="results">
@@ -1040,14 +1039,8 @@ defineExpose({ openModelSelection })
             ></v-badge>
           </span>
           <v-spacer></v-spacer>
-          <v-tooltip
-            v-if="secondActiveTileId"
-            :text="
-              stacPreviewTileId === secondActiveTileId ? 'Hide scene B image' : 'Show scene B image'
-            "
-            open-on-click
-          >
-            <template v-slot:activator="{ props }">
+          <v-menu v-if="secondActiveTileId" open-on-hover :close-on-content-click="false">
+            <template #activator="{ props }">
               <v-btn
                 v-bind="props"
                 :icon="stacPreviewTileId === secondActiveTileId ? mdiEyeOutline : mdiEyeOffOutline"
@@ -1058,7 +1051,10 @@ defineExpose({ openModelSelection })
                 "
               ></v-btn>
             </template>
-          </v-tooltip>
+            <v-sheet class="pa-3 text-body-2">
+              {{ stacPreviewTileId === secondActiveTileId ? 'Hide scene B image' : 'Show scene B image' }}
+            </v-sheet>
+          </v-menu>
         </v-expansion-panel-title>
         <v-expansion-panel-text>
           <div class="results">