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

+
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: ${zipCode}, ${name}`; - if (center == null) return; + tooltip.setText(zipCode ? `${zipCode} ${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("#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%; + } +} +