Replace v-tooltip with bootstrap tooltip

SUPLA · Nov 17, 2022 · 2dc856b · 2dc856b
1 parent 1990dce
commit 2dc856b
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 62 deletions.
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
diff --git a/src/frontend/package.json b/src/frontend/package.json
@@ -32,7 +32,6 @@
     "pnotify": "3.2.1",
     "spectrum-colorpicker": "1.8.0",
     "v-media-query": "^1.0.3",
-    "v-tooltip": "^2.1.3",
     "vivus": "0.4.4",
     "vue": "^2.7.13",
     "vue-carousel": "0.6.5",

diff --git a/src/frontend/src/common/common-directives.js b/src/frontend/src/common/common-directives.js
@@ -32,3 +32,21 @@ Vue.directive('focus', {
         }
     }
 });
+
+function insertTooltip(element, binding) {
+    if (binding.value) {
+        const placement = binding.modifiers.bottom ? 'bottom' : 'top';
+        $(element).tooltip({
+            title: binding.value,
+            placement,
+        });
+    } else {
+        $(element).tooltip('destroy');
+    }
+}
+
+Vue.directive('tooltip', {
+    inserted: insertTooltip,
+    update: insertTooltip,
+    componentUpdated: insertTooltip,
+})
diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
@@ -1,13 +1,13 @@
 import 'bootstrap/js/collapse';
 import 'bootstrap/js/dropdown';
+import 'bootstrap/js/tooltip';
 import "pixeden-stroke-7-icon/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import Vue from "vue";
 import {i18n, setGuiLocale} from './locale';
 import router from './router';
 import VueResource from "vue-resource";
 import vMediaQuery from 'v-media-query';
-import VTooltip from 'v-tooltip';
 import ResponseErrorInterceptor from "./common/http/response-error-interceptor";
 import * as requestTransformers from "./common/http/transformers";
 import "./common/common-components";
@@ -24,7 +24,6 @@ import './hello';
 
 Vue.use(VueResource);
 Vue.use(vMediaQuery, {variables: {xs: 768}});
-Vue.use(VTooltip);
 
 Vue.prototype.$frontendVersion = FRONTEND_VERSION; // eslint-disable-line no-undef
 Vue.config.productionTip = false;