From 5dac1f89930643b155db9b31b0197862df071680 Mon Sep 17 00:00:00 2001
From: Maximilian Harz <maxharz@gmail.com>
Date: Wed, 28 May 2025 14:26:25 +0200
Subject: [PATCH] Replace v-tooltip by floating-vue (WIP)

---
 webapp/components/Dropdown.vue                | 13 +++----
 .../source/nuxt.config.maintenance.js         |  2 +-
 webapp/nuxt.config.js                         |  2 +-
 webapp/package.json                           |  2 +-
 webapp/plugins/floating-vue.js                | 13 +++++++
 webapp/plugins/v-tooltip.js                   | 16 ---------
 webapp/storybook/helpers.js                   |  2 +-
 webapp/test/testSetup.js                      |  2 +-
 webapp/yarn.lock                              | 34 ++++++++++++-------
 9 files changed, 47 insertions(+), 39 deletions(-)
 create mode 100644 webapp/plugins/floating-vue.js
 delete mode 100644 webapp/plugins/v-tooltip.js

diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue
index 84fe23bb8..5c3ba4b9e 100644
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@@ -1,12 +1,13 @@
 <template>
-  <v-popover
+  <VPopover
     :open.sync="isPopoverOpen"
     :open-group="Math.random().toString()"
     :placement="placement"
     :disabled="disabled"
-    trigger="manual"
-    :offset="offset"
-    :boundaries-element="bodyAsBoundary ? 'body' : undefined"
+    :triggers="[]"
+    :skidding="offset"
+    :distance="offset"
+    :container="body"
   >
     <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
     <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoverMouseLeave">
@@ -18,7 +19,7 @@
         :isOpen="isOpen"
       />
     </div>
-  </v-popover>
+  </VPopover>
 </template>
 
 <script>
@@ -29,7 +30,7 @@ export default {
   props: {
     placement: { type: String, default: 'bottom-end' },
     disabled: { type: Boolean, default: false },
-    offset: { type: [String, Number], default: '16' },
+    offset: { type: [String, Number], default: '0' },
     noMouseLeaveClosing: { type: Boolean, default: false },
     bodyAsBoundary: { type: Boolean, default: false },
   },
diff --git a/webapp/maintenance/source/nuxt.config.maintenance.js b/webapp/maintenance/source/nuxt.config.maintenance.js
index 4bbe72fdb..921954e91 100644
--- a/webapp/maintenance/source/nuxt.config.maintenance.js
+++ b/webapp/maintenance/source/nuxt.config.maintenance.js
@@ -35,7 +35,7 @@ export default {
   plugins: [
     { src: `~/plugins/styleguide.js`, ssr: true },
     { src: '~/plugins/i18n.js', ssr: true },
-    { src: '~/plugins/v-tooltip.js', ssr: false },
+    { src: '~/plugins/floating-vue.js', ssr: false },
   ],
 
   modules: ['cookie-universal-nuxt', '@nuxtjs/style-resources'],
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index 263c3f149..a44d64ec1 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -124,7 +124,7 @@ export default {
     { src: '~/plugins/axios.js', ssr: false },
     { src: '~/plugins/keep-alive.js', ssr: false },
     { src: '~/plugins/vue-directives.js', ssr: false },
-    { src: '~/plugins/v-tooltip.js', ssr: false },
+    { src: '~/plugins/floating-vue.js', ssr: false },
     { src: '~/plugins/izi-toast.js', ssr: false },
     { src: '~/plugins/vue-filters.js' },
     { src: '~/plugins/vue-infinite-loading.js', ssr: false },
diff --git a/webapp/package.json b/webapp/package.json
index c9960ccb4..e30ae28a9 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -52,7 +52,7 @@
     "tiptap-extensions": "~1.28.8",
     "trunc-html": "^1.1.2",
     "v-mapbox": "^1.11.2",
-    "v-tooltip": "~2.1.3",
+    "floating-vue": "1.0.0-beta.19",
     "validator": "^13.15.0",
     "vue-advanced-chat": "^2.0.11",
     "vue-count-to": "~1.0.13",
diff --git a/webapp/plugins/floating-vue.js b/webapp/plugins/floating-vue.js
new file mode 100644
index 000000000..9e7d79549
--- /dev/null
+++ b/webapp/plugins/floating-vue.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import FloatingVue from 'floating-vue'
+
+import 'floating-vue/dist/style.css'
+
+Vue.use(FloatingVue, {
+  delay: {
+    show: 750,
+    hide: 50,
+  },
+  distance: 2,
+  skidding: 2,
+})
diff --git a/webapp/plugins/v-tooltip.js b/webapp/plugins/v-tooltip.js
deleted file mode 100644
index 0c0cbc8d6..000000000
--- a/webapp/plugins/v-tooltip.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Vue from 'vue'
-import VTooltip from 'v-tooltip'
-
-Vue.use(VTooltip, {
-  defaultDelay: {
-    show: 750,
-    hide: 50,
-  },
-  defaultOffset: 2,
-  defaultPopperOptions: {
-    removeOnDestroy: true,
-  },
-  popover: {
-    // defaultArrowClass: 'm-dropdown__arrow'
-  },
-})
diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index f389fc3f4..f8a1cea3e 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -8,7 +8,7 @@ import Directives from '~/plugins/vue-directives'
 import IziToast from '~/plugins/izi-toast'
 import layout from './layout.vue'
 import locales from '~/locales/index.js'
-import '~/plugins/v-tooltip'
+import '~/plugins/floating-vue.js'
 
 const helpers = {
   init(options = {}) {
diff --git a/webapp/test/testSetup.js b/webapp/test/testSetup.js
index 741e5f0ce..ac056b8c3 100644
--- a/webapp/test/testSetup.js
+++ b/webapp/test/testSetup.js
@@ -1,6 +1,6 @@
 import { createLocalVue } from '@vue/test-utils'
 import Vuex from 'vuex'
-import VTooltip from 'v-tooltip'
+import VTooltip from 'floating-vue'
 import Styleguide from '@human-connection/styleguide'
 import BaseComponents from '~/plugins/base-components'
 import Filters from '~/plugins/vue-filters'
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 84ed96c66..163f3383d 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -2531,6 +2531,18 @@
   resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-9.8.0.tgz#3344284028d1c9dc98dee2479f82939310370d88"
   integrity sha512-U9wpuSrJC93jZBxx/Qq2wPjCuYISBueyVUGK7qqdmj7r/nxaxwW8AQDCLeRO7wZnjj94sh3p246cAYjUKuqgfg==
 
+"@floating-ui/core@^0.3.0":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.3.1.tgz#3dde0ad0724d4b730567c92f49f0950910e18871"
+  integrity sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g==
+
+"@floating-ui/dom@^0.1.10":
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.1.10.tgz#ce304136a52c71ef157826d2ebf52d68fa2deed5"
+  integrity sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==
+  dependencies:
+    "@floating-ui/core" "^0.3.0"
+
 "@human-connection/styleguide@0.5.22":
   version "0.5.22"
   resolved "https://registry.yarnpkg.com/@human-connection/styleguide/-/styleguide-0.5.22.tgz#444ec98b8f8d1c438e2e99736dcffe432b302755"
@@ -10203,6 +10215,14 @@ flatten@^1.0.2:
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
   integrity sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=
 
+floating-vue@1.0.0-beta.19:
+  version "1.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-1.0.0-beta.19.tgz#9ba42675bada14fc3523e0972731d4bbc67fb534"
+  integrity sha512-OcM7z5Ua4XAykqolmvPj3l1s+KqUKj6Xz2t66eqjgaWfNBjtuifmxO5+4rRXakIch/Crt8IH+vKdKcR3jOUaoQ==
+  dependencies:
+    "@floating-ui/dom" "^0.1.10"
+    vue-resize "^1.0.0"
+
 flush-promises@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/flush-promises/-/flush-promises-1.0.2.tgz#4948fd58f15281fed79cbafc86293d5bb09b2ced"
@@ -15329,7 +15349,7 @@ polished@^3.3.1:
   dependencies:
     "@babel/runtime" "^7.4.5"
 
-popper.js@^1.14.4, popper.js@^1.14.7, popper.js@^1.16.1:
+popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
@@ -19601,16 +19621,6 @@ v-mapbox@^1.11.2:
   dependencies:
     map-promisified "^0.4.0"
 
-v-tooltip@~2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.1.3.tgz#281c2015d1e73787f13c8956aa295b8c3a73f261"
-  integrity sha512-xXngyxLQTOx/yUEy50thb8te7Qo4XU6h4LZB6cvEfVd9mnysUxLEoYwGWDdqR+l69liKsy3IPkdYff3J1gAJ5w==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    lodash "^4.17.21"
-    popper.js "^1.16.1"
-    vue-resize "^1.0.1"
-
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
@@ -19831,7 +19841,7 @@ vue-observe-visibility@^1.0.0:
   resolved "https://registry.yarnpkg.com/vue-observe-visibility/-/vue-observe-visibility-1.0.0.tgz#17cf1b2caf74022f0f3c95371468ddf2b9573152"
   integrity sha512-s5TFh3s3h3Mhd3jaz3zGzkVHKHnc/0C/gNr30olO99+yw2hl3WBhK3ng3/f9OF+qkW4+l7GkmwfAzDAcY3lCFg==
 
-vue-resize@^1.0.1:
+vue-resize@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-1.0.1.tgz#c120bed4e09938771d622614f57dbcf58a5147ee"
   integrity sha512-z5M7lJs0QluJnaoMFTIeGx6dIkYxOwHThlZDeQnWZBizKblb99GSejPnK37ZbNE/rVwDcYcHY+Io+AxdpY952w==