Add tooltip on hover ! 👀

2 files changed, 79 insertions, 5 deletions

diff --git a/src/App.svelte b/src/App.svelte
index dc81785..2086708 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,7 +15,7 @@
     })
   );
 
-  let france = France
+  let france = France;
   let currentDepGuessed = -1;
   let listGuesses = []
   let codeSelected;
@@ -30,6 +30,9 @@
   let canImprove = true;
   let feedbackString = "";
 
+  let fr_svg; // France SVG binding
+  let info;   // tooltip div binding
+
   function addClassGuess(dep, className) {
     if(["75", "92", "93", "94"].includes(dep)) {
       addClassGuess(dep + "-bis", className)
@@ -55,6 +58,7 @@
     winCount = 0;
     guessCount = 0;
 
+    // Clean the map of any previous style
     for(let dep of listDep) {
       removeClassGuess(dep, "win")
       removeClassGuess(dep, "miss")
@@ -113,7 +117,6 @@
     autocomplete.value = "";
   }
 
-
   function replaceSlide({ duration = 200, pixels = 200} = {}) {
     function send(node) {
       return function() {
@@ -149,6 +152,38 @@
   function showConfetti() {
       jsConfetti.addConfetti()
   }
+
+  function initTooltip() {
+    /**
+     * Set the tooltip event listener to show the department name on hover.
+     */
+    const deps = fr_svg.getElementsByTagName("path");
+
+    for(let dep of deps) {
+      if(dep.id.startsWith("dep_")) {
+        const code = dep.id.slice(4).replace("-bis", "");
+
+        dep.addEventListener("mouseenter", () => {
+          info.classList.add("active")
+          info.innerHTML = `<b>${departements[code]['name']}</b>`
+        });
+
+        dep.addEventListener("mouseleave", () => {
+          info.classList.remove("active")
+        });
+        dep.addEventListener("mousemove", e => {
+          // info.style.transform = "translate3d(" + e.layerX + "px," + e.layerY + "px, 0)";
+          info.style.top = `${e.pageY - 70}px`;
+          info.style.left = `${e.pageX - 0}px`;
+        });
+      }
+    }
+  }
+
+	onMount(() => {
+    initTooltip();
+  });
+
 </script>
 
 <main>
@@ -160,7 +195,7 @@
     <h3>Devine quel est ce département : </h3>
   {/if}
 
-  <svelte:component this={france}/>
+  <svelte:component this={france} bind:svg={fr_svg}/>
 
   {#if currentDepGuessed == -1}
   <div class="response" in:receive out:send>
@@ -174,7 +209,7 @@
       {/if}
       </div>
     {/if}
-    <button type="button" on:click={start}>{ guessCount > 0 ? "Restart" : "Start" }</button>
+    <button type="button" on:click={start}>{ guessCount > 0 ? "Recommencer" : "Démarrer" }</button>
   </div>
   {:else}
   <div class="response" in:receive out:send>
@@ -203,6 +238,8 @@
     <div>{feedbackString}</div>
   </div>
   {/if}
+
+  <div class="tooltip" bind:this={info}>Hello</div>
 </main>
 
 <style>
@@ -227,5 +264,4 @@
   .guessCode {
     height: 45px;
   }
-
 </style>
diff --git a/src/app.css b/src/app.css
index 25775c1..bdd8800 100644
--- a/src/app.css
+++ b/src/app.css
@@ -23,6 +23,44 @@ a:hover {
   color: #535bf2;
 }
 
+.tooltip {
+  pointer-events: none;
+  position: absolute;
+  font-size: 18px;
+  text-align: center;
+  background: white;
+  padding: 10px 15px;
+  z-index: 5;
+  height: 30px;
+  line-height: 30px;
+  margin: 0 auto;
+  color: #21669e;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px #eee;
+
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+
+  display: none;
+  &.active {
+    display: block;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    top: 100%;
+    width: 0;
+    height: 0;
+    margin-left: -10px;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid white;
+  }
+}
+
 body {
   margin: 0;
   display: flex;