Add location tooltip to map controls

src/components/spatialdisplay/SpatialDisplayComponent.vue

@@ -39,7 +39,8 @@
     />
   </MapComponent>
   <div class="mapcomponent__controls-container">
-    <v-chip-group class="px-2">
+    <v-chip-group class="control-group">
+      <TooltipPanel v-if="tooltip" :content="tooltip" />
       <BoundingBoxControl
         v-model:active="workflowsStore.isDrawingBoundingBox"
         v-model:boundingBox="workflowsStore.boundingBox"
@@ -152,6 +153,8 @@ import {
 } from '@/lib/legend'
 import { useWorkflowsStore } from '@/stores/workflows'
 import { TimeSeriesData } from '@/lib/timeseries/types/SeriesData'
+import { useLocationTooltip } from '@/services/useLocationTooltip'
+import TooltipPanel from '@/components/wms/TooltipPanel.vue'
 
 interface ElevationWithUnitSymbol {
   units?: string
@@ -418,6 +421,15 @@ watch(currentTime, () => {
   emit('update:currentTime', currentTime.value)
 })
 
+const { tooltip } = useLocationTooltip(baseUrl, () =>
+  props.filterIds.length && props.locationId
+    ? {
+        filterId: props.filterIds[0],
+        locationId: props.locationId,
+      }
+    : undefined,
+)
+
 function setLayerOptions(): void {
   if (props.layerName) {
     layerOptions.value = {
@@ -486,4 +498,8 @@ function onCoordinateMoved(lat: number, lng: number): void {
 :deep(.maplibregl-ctrl-bottom-left) {
   bottom: v-bind('offsetBottomControls');
 }
+
+.control-group :deep(.v-slide-group__content) {
+  padding: 0 8px;
+}
 </style>

src/components/wms/TooltipPanel.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-chip label class="tooltip-chip">
+    <v-icon>mdi-information</v-icon>
+    <v-menu
+      v-model="opened"
+      transition="slide-y-transition"
+      :close-on-content-click="false"
+      activator="parent"
+      persistent
+      no-click-animation
+    >
+      <div class="tooltip-chip px-3 py-2 my-2 elevation-1">
+        <div v-html="content" />
+      </div>
+    </v-menu>
+  </v-chip>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  content: string
+}
+
+defineProps<Props>()
+
+const opened = ref(true)
+</script>
+
+<style scoped>
+.tooltip-chip {
+  font-size: 0.825em;
+  z-index: 1000;
+  border-radius: 5px;
+  backdrop-filter: blur(5px);
+  background-color: rgba(var(--v-theme-surface), 0.8);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+}
+</style>