diff --git a/src/css/sections/meetups.css b/src/css/sections/meetups.css index f41775a0557..c2820739fc5 100644 --- a/src/css/sections/meetups.css +++ b/src/css/sections/meetups.css @@ -11,7 +11,8 @@ margin-top: var(--space-xl); & img, - & .dot { + & .dot, + & .tooltip { display: none; } } @@ -75,6 +76,16 @@ animation-name: pulse; } } + + & .tooltip { + position: absolute; + z-index: 2; + min-width: 7rem; + font-size: .65rem; + padding: var(--space-xs) var(--space-m); + background: var(--color-overlay-bg); + border-radius: var(--space-m); + } } } diff --git a/src/kurse.pug b/src/kurse.pug index 3b9aa65f836..03b942ef9aa 100644 --- a/src/kurse.pug +++ b/src/kurse.pug @@ -33,6 +33,7 @@ block main - j++ img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH") + #tooltip.tooltip(hidden) if unmapped.length #unmapped diff --git a/src/meetups.pug b/src/meetups.pug index 34a86db0780..71d93deccc5 100644 --- a/src/meetups.pug +++ b/src/meetups.pug @@ -53,6 +53,7 @@ block main - j++ img#dach(src=assetPath('/img/dach.svg') alt="DE, AT, CH") + #tooltip.tooltip(hidden) #unmapped h2 Weitere Meetups diff --git a/static/js/main.js b/static/js/main.js index aa4e2e188f4..7d62ae50639 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -109,13 +109,18 @@ document.addEventListener("DOMContentLoaded", () => { }) // Map - const map = document.getElementById('dach') - if (map) { - map.onclick = e => { - console.log({ - top: Math.round((e.offsetY / e.target.height) * 100) - 2, - left: Math.round((e.offsetX / e.target.width) * 100) + 1, - }) + const map = document.getElementById('map') + const mapImg = document.getElementById('dach') + const tooltip = document.getElementById('tooltip') + if (map && mapImg && tooltip) { + mapImg.onclick = e => { + const top = Math.round((e.offsetY / e.target.height) * 100) - 2 + const left = Math.round((e.offsetX / e.target.width) * 100) + 1 + console.log({ top, left }, map) + tooltip.innerText = `Top: ${top} / Left: ${left}` + tooltip.removeAttribute('hidden') + tooltip.style.top = `${top + 1}%` + tooltip.style.left = `${left}%` } } })