Fix minimap tootip

components/app/MiniMap.vue

 <template>
-  <div>
+  <div class="relative">
     <Regions id="regionSVG" ref="regionSVG" class="text-gray-500" />
     <span
       v-show="hovered"
       id="tooltip-mini-map"
-      class="bg-white fixed pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 dark:bg-gray-700"
+      class="absolute whitespace-nowrap pointer-events-none p-1 shadow-lg rounded text-xs bg-opacity-90 bg-white dark:bg-gray-700"
     >
       {{ hovered && hovered.name }}
     </span>
@@ -207,8 +207,8 @@ export default {
     const tooltip = this.$el.querySelector('#tooltip-mini-map')
 
     this.$refs.regionSVG.addEventListener('mousemove', (evt) => {
-      tooltip.style.left = evt.clientX + 15 + 'px'
-      tooltip.style.top = evt.clientY - 20 + 'px'
+      tooltip.style.left = evt.offsetX + 15 + 'px'
+      tooltip.style.top = evt.offsetY - 20 + 'px'
     })
 
     regionsPath.forEach((region) => {
@@ -279,8 +279,9 @@ Allemagne: '#3AB54A',
 
 <style lang="postcss" scoped>
 #regionSVG >>> path {
-  opacity: 0.6;
-  transition: opacity ease 150ms;
+  opacity: 0.7;
+  /* // removed cause glitch effect
+   transition: opacity ease 150ms; */
   cursor: pointer;
 }
 #regionSVG >>> path:hover {