concernement on map hover effect, better mappopup

src/assets/main.scss

@@ -112,13 +112,68 @@ body{
 
   #map-popup{
     position: absolute;
+    z-index: 10;
+    // outline: 1px solid red;
     // top:0;
     // left: 0;
-    background-color: white;
-    padding: 1em;
-    h1{
-      font-size: 1em;
-      font-weight: 400;
+
+    .popup-content-wrapper{
+      background-color: white;
+      padding: 1em;
+      border-radius: 3px;
+      // min-width: 10em;
+      // max-width: 30em;
+      h1{
+        font-size: 1em;
+        font-weight: 400;
+      }
     }
+
+    &:before{
+      content: "";
+      display: block;
+      height: 0;
+      width: 2.9em;
+      border-top: 1px solid #01ffe2;
+      position: absolute;
+    }
+
+    &[pos="top-right"]{
+      padding: 0 0 2em 2em;
+      &:before{
+        bottom: 0;
+        left: 0;
+        transform-origin: 0 0;
+        transform: rotate(-45deg);
+      }
+    }
+    &[pos="bottom-right"]{
+      padding: 2em 0 0 2em;
+      &:before{
+        top: 0;
+        left: 0;
+        transform-origin: 0 0;
+        transform: rotate(45deg);
+      }
+    }
+    &[pos="top-left"]{
+      padding: 0 2em 2em 0;
+      &:before{
+        bottom: 0;
+        right: 0;
+        transform-origin: right bottom;
+        transform: rotate(45deg);
+      }
+    }
+    &[pos="bottom-left"]{
+      padding: 2em 2em 0 0;
+      &:before{
+        top: 0;
+        right: 0;
+        transform-origin: right top;
+        transform: rotate(-45deg);
+      }
+    }
+
   }
 }