fix(client): use portal-vue for tooltips

client/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.21.2",
+    "portal-vue": "^2.1.7",
     "vue": "^2.6.12",
     "vue-content-loader": "^0.2.3",
     "vue-meta": "^2.4.0",

client/src/App.vue

@@ -3,6 +3,7 @@
     <SVGContainer />
     <NotificationsContainer />
     <RunesContainer />
+    <portal-target name="tooltip-destination" />
     <component :is="layout">
       <router-view />
     </component>

client/src/components/Common/Tooltip.vue

@@ -13,14 +13,16 @@
     </div>
 
     <!-- tooltip content -->
-    <div
-      v-show="isOpen"
-      ref="content"
-      class="bg-blue-1000 fixed z-50 py-2 rounded-md shadow"
-      :style="{ ...position }"
-    >
-      <slot></slot>
-    </div>
+    <portal v-if="isOpen" to="tooltip-destination">
+      <div
+        v-show="isOpen"
+        ref="content"
+        class="bg-blue-1000 fixed z-50 py-2 rounded-md shadow"
+        :style="{ ...position }"
+      >
+        <slot></slot>
+      </div>
+    </portal>
   </div>
 </template>
  

client/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueAxios from './plugins/axios'
 import VueMeta from 'vue-meta'
 import { VuePlausible } from 'vue-plausible'
+import PortalVue from 'portal-vue'
 
 
 import '@/assets/css/main.css'
@@ -19,6 +20,7 @@ Vue.use(VuePlausible, {
 })
 Vue.$plausible.enableAutoPageviews()
 Vue.use(VueMeta)
+Vue.use(PortalVue)
 
 Vue.filter('capitalize', (value) => {
   return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()