From d124702f8776ce9922869852596680ba93f775cd Mon Sep 17 00:00:00 2001
From: ReiMerc <reim0009@edu.mercantec.dk>
Date: Wed, 8 Feb 2023 11:44:19 +0100
Subject: [PATCH] Add tooltip

---
 frontend/index.html     |  1 +
 frontend/src/Tooltip.ts | 24 ++++++++++++++++++++++++
 frontend/src/main.ts    |  9 ++++++---
 frontend/style.css      | 19 +++++++++++++++++++
 4 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/Tooltip.ts

diff --git a/frontend/index.html b/frontend/index.html
index 80eec51..03bd293 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -35,5 +35,6 @@
                 <p id="coords"></p>
             </div>
         </main>
+        <div id="tooltip"></div>
     </body>
 </html>
diff --git a/frontend/src/Tooltip.ts b/frontend/src/Tooltip.ts
new file mode 100644
index 0000000..4004a29
--- /dev/null
+++ b/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;
+    }
+}
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index ab97d06..95a2fc6 100644
--- a/frontend/src/main.ts
+++ b/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 };
diff --git a/frontend/style.css b/frontend/style.css
index 4133592..2e1a807 100644
--- a/frontend/style.css
+++ b/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%;
+    }
+}
+