Add tooltip

frontend/index.html

@@ -35,5 +35,6 @@
                 <p id="coords"></p>
             </div>
         </main>
+        <div id="tooltip"></div>
     </body>
 </html>

frontend/src/Tooltip.ts

@@ -0,0 +1,24 @@
+const OFFSET = 12;
+
+export class Tooltip {
+    private timeout: number | null = null;
+
+    constructor(private element: HTMLElement) {
+        document.body.addEventListener("mousemove", (event: MouseEvent) => {
+            this.element.style.opacity = "1";
+            this.element.style.left = event.x + OFFSET + "px";
+            this.element.style.top  = event.y + OFFSET + "px";
+
+            if (this.timeout) clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.element.style.opacity = "0.8";
+            }, 1000);
+        });
+    }
+
+    setText(text: string) {
+        this.element.style.display = text ? "block" : "none";
+        this.element.innerHTML = text;
+    }
+}
+

frontend/src/main.ts

@@ -2,6 +2,9 @@ import { Throttler } from "./Throttler";
 import { setTopbarOffset, addToggleDropdownListener } from "./topbar";
 import { Coordinate, Position, convertPixelsToCoordinate, convertCoordinateToPixels } from "./coordinates";
 import { Size } from "./size";
+import { Tooltip } from "./Tooltip";
+
+const tooltip = new Tooltip(document.getElementById("tooltip")!);
 
 type ZipCodeReverseResponse = {
     nr: number | null;
@@ -48,11 +51,11 @@ function displayZipCode(
             ? `Postnummer ikke fundet`
             : `Postnummer: <code>${zipCode}</code>, ${name}`;
 
-    if (center == null) return;
+    tooltip.setText(zipCode ? `<code>${zipCode}</code> ${name}` : "");
 
     const dot = document.getElementById("dot")!;
 
-    if (!zipCode) {
+    if (!center) {
         dot.style.display = "none";
         return;
     }
@@ -76,7 +79,7 @@ function setupMap(
     zipCodeElement: HTMLParagraphElement,
 ) {
     const mapImg = document.querySelector<HTMLImageElement>("#map")!;
-    const fetcher = new Throttler(500);
+    const fetcher = new Throttler(200);
 
     mapImg.onmousemove = async (event: MouseEvent) => {
         const mousePosition: Position = { x: event.offsetX, y: event.offsetY };

frontend/style.css

@@ -180,6 +180,25 @@ code {
     border-radius: 50%;
     border: 2px solid black;
     background-color: var(--brand);
+    filter: drop-shadow(1px 1px 2px black);
     position: absolute;
     display: none;
 }
+
+#tooltip {
+    display: none;
+    position: absolute;
+    background-color: white;
+    color: black;
+    padding: 5px;
+    border: 1px solid black;
+    box-shadow: 2px 2px 2px black;
+    transition: opacity 0.2s;
+}
+
+@media screen and (max-width: 1000px) {
+    main {
+        width: 100%;
+    }
+}
+