adds tooltips for elevation profile wps

web/src/css/components.css

@@ -59,10 +59,11 @@
     border-radius: 4px;
     color: #fff;
     content: attr(data-title);
-    font-size: 14px;
+    font-size: 12px;
     padding: 6px 10px;
     top: 24px;
     white-space: nowrap;
+    z-index: 10
 }
 
 .tooltip:hover:after,

web/src/lib/components/trail/map_with_elevation_maplibre.svelte

@@ -615,4 +615,8 @@
         width: 100%;
         height: 100%;
     }
+
+    :global(.maplibregl-popup-content) {
+        @apply bg-background rounded-md;
+    }
 </style>

web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts

@@ -696,7 +696,7 @@ export class ElevationProfile {
                             wpDiv.style.top = `8px`; // Position horizontally
 
                             // Add custom HTML content (e.g., icon + label)
-                            wpDiv.innerHTML = `<i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i>`;
+                            wpDiv.innerHTML = `<div class="tooltip" data-title="${this.waypoints[index].name ?? "?"}"><i class="fa fa-${this.waypoints.at(index)?.icon ?? 'circle'}"></i></div>`;
 
                             waypointContainer.appendChild(wpDiv); // Add to container
                         });