brian/wanderer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds tooltips for elevation profile wps

Browse Source
This commit is contained in:
Christian Beutel
2024-12-02 01:30:46 +01:00
parent 5bd8c7b610
commit f421aa47fd
2 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/css/components.css
View File

@@ -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,

3
web/src/lib/vendor/maplibre-elevation-profile/elevationprofile.ts vendored
View File

@@ -691,7 +691,8 @@ export class ElevationProfile {
// Create custom HTML tick
const wpDiv = document.createElement("div");
wpDiv.className = "wp-marker absolute -translate-x-1/2 w-6 aspect-square bg-background-inverse rounded-full flex justify-center items-center text-content-inverse cursor-pointer hover:scale-110";
wpDiv.className = "wp-marker tooltip absolute -translate-x-1/2 w-6 aspect-square bg-background-inverse rounded-full flex justify-center items-center text-content-inverse cursor-pointer hover:scale-110";
wpDiv.dataset.title = this.waypoints[index].name ?? "?"
wpDiv.style.left = `${xPos}px`; // Position horizontally
wpDiv.style.top = `8px`; // Position horizontally