Replace jBox tooltips with Floating Vue tooltips, remove jBox assets and references

Author: DavidAnson

package.json

@@ -49,11 +49,11 @@
     "d3": "^7.9.0",
     "djv": "^2.1.4",
     "dompurify": "^3.2.4",
+    "floating-vue": "^5.2.2",
     "i18next": "^24.2.2",
     "i18next-vue": "^5.2.0",
     "i18next-xhr-backend": "^3.2.2",
     "inflection": "^1.13.4",
-    "jbox": "^1.3.3",
     "jquery": "^3.7.1",
     "jquery-textcomplete": "^1.8.5",
     "jquery-touchswipe": "^1.6.19",

src/components/init.js

@@ -6,6 +6,8 @@ import "../js/localization.js";
 import "../js/injected_methods";
 import i18next from "i18next";
 import { createApp, reactive } from "vue";
+import { Tooltip, options } from "floating-vue";
+import "floating-vue/dist/style.css";
 import I18NextVue from "i18next-vue";
 import FC from "../js/fc.js";
 import MSP from "../js/msp.js";
@@ -41,6 +43,19 @@ i18next.on("initialized", function () {
         },
     });
 
+    // Register Floating Vue tooltip and custom themes
+    app.component("VTooltip", Tooltip);
+    options.themes.custom = {
+        $extend: "tooltip",
+        html: true,
+        placement: "right",
+        popperTriggers: ["focus", "hover", "touch"],
+        triggers: ["focus", "hover", "touch"],
+    };
+    options.themes.custom_wide = {
+        $extend: "custom",
+    };
+
     app.use(I18NextVue, { i18next }).use(BetaflightComponents).mount("#main-wrapper");
 
     if (process.env.NODE_ENV === "development") {

src/css/main.less

@@ -1631,10 +1631,18 @@ button.active {
     border: 1px solid var(--primary-600);
     color: #000;
 }
-.jBox-Tooltip {
+.v-popper--theme-tooltip.v-popper--theme-custom .v-popper__inner {
+    background: var(--surface-300);
+    border: 2px solid var(--primary-500);
+    border-radius: 0.5rem;
+    color: var(--text);
     max-width: 180px;
+    padding: 8px;
+}
+.v-popper--theme-tooltip.v-popper--theme-custom .v-popper__arrow-outer {
+    border-color: var(--primary-500);
 }
-.jBox-Widetip {
+.v-popper--theme-tooltip.v-popper--theme-custom_wide .v-popper__inner {
     max-width: 300px;
 }
 .hidden {
@@ -1648,48 +1656,6 @@ button.active {
     border-top: 1px solid var(--surface-400);
     padding-top: 5px;
 }
-.jBox-container {
-    background: var(--surface-300) !important;
-    border: 2px solid var(--primary-500);
-    color: var(--text);
-    border-radius: 0.5rem !important;
-}
-.jBox-title {
-    background: var(--surface-300) !important;
-    border-bottom: 1px solid var(--surface-950) !important;
-}
-.jBox-content {
-    padding: 0.5rem;
-}
-.jBox-Modal {
-    .jBox-content {
-        padding: 10px 15px;
-    }
-}
-.jBox-pointer-top {
-    width: 22px;
-    height: 10px;
-}
-.jBox-pointer-bottom {
-    width: 22px;
-    height: 10px;
-}
-.jBox-pointer-left {
-    width: 10px;
-    height: 20px;
-}
-.jBox-pointer-right {
-    width: 10px;
-    height: 20px;
-}
-.jBox-pointer {
-    &:after {
-        width: 10px;
-        height: 9px;
-        border: 2px solid var(--primary-500) !important;
-        background-color: var(--primary-500) !important;
-    }
-}
 #dialogResetToCustomDefaults-content {
     margin-top: 10px;
     margin-bottom: 10px;

src/js/browserMain.js

@@ -1,5 +1,4 @@
 import "../js/jqueryPlugins";
-import "jbox/dist/jBox.min.css";
 import "../../libraries/jquery.nouislider.min.css";
 import "../../libraries/jquery.nouislider.pips.min.css";
 import "../../libraries/flightindicators.css";

src/js/gui.js

@@ -1,7 +1,7 @@
 import { get as getConfig } from "./ConfigStorage";
 import MSP from "./msp";
 import Switchery from "switchery-latest";
-import jBox from "jbox";
+import { createTooltip } from "floating-vue";
 import $ from "jquery";
 import { getOS } from "./utils/checkBrowserCompatibility";
 
@@ -290,36 +290,16 @@ class GuiControl {
             .html(i18n.getMessage("betaflightSupportButton"))
             .attr("href", `https://betaflight.com/docs/wiki/configurator/${tRex}-tab`);
 
-        // loading tooltip
+        // Create tooltips once page is "ready"
         $(function () {
-            new jBox("Tooltip", {
-                attach: ".cf_tip",
-                trigger: "mouseenter",
-                closeOnMouseleave: true,
-                closeOnClick: "body",
-                delayOpen: 100,
-                delayClose: 100,
-                position: {
-                    x: "right",
-                    y: "center",
-                },
-                outside: "x",
-            });
-
-            new jBox("Tooltip", {
-                theme: "Widetip",
-                attach: ".cf_tip_wide",
-                trigger: "mouseenter",
-                closeOnMouseleave: true,
-                closeOnClick: "body",
-                delayOpen: 100,
-                delayClose: 100,
-                position: {
-                    x: "right",
-                    y: "center",
-                },
-                outside: "x",
-            });
+            for (const suffix of ["", "_wide"]) {
+                $(`.cf_tip${suffix}`).each((_, element) => {
+                    createTooltip(element, {
+                        content: $(element).attr("title"),
+                        theme: `custom${suffix}`,
+                    });
+                });
+            }
         });
 
         if (callback) {

src/js/tabs/osd.js

@@ -10,7 +10,7 @@ import CONFIGURATOR, { API_VERSION_1_45, API_VERSION_1_46, API_VERSION_1_47 } fr
 import LogoManager from "../LogoManager";
 import { gui_log } from "../gui_log";
 import semver from "semver";
-import jBox from "jbox";
+import { createTooltip, destroyTooltip } from "floating-vue";
 import inflection from "inflection";
 import debounce from "lodash.debounce";
 import $ from "jquery";
@@ -3937,28 +3937,18 @@ osd.initialize = function (callback) {
                     }
                 }
 
-                // Remove last tooltips
-                for (const tt of OSD.data.tooltips) {
-                    tt.destroy();
+                // Remove previous tooltips
+                for (const element of OSD.data.tooltips) {
+                    destroyTooltip(element);
                 }
-                OSD.data.tooltips = [];
-
-                // Generate tooltips for OSD elements
-                $(".osd_tip").each(function () {
-                    const myModal = new jBox("Tooltip", {
-                        delayOpen: 100,
-                        delayClose: 100,
-                        position: {
-                            x: "right",
-                            y: "center",
-                        },
-                        outside: "x",
+                // Attach new tooltips
+                OSD.data.tooltips = $(".osd_tip").toArray();
+                for (const element of OSD.data.tooltips) {
+                    createTooltip(element, {
+                        content: $(element).attr("title"),
+                        theme: "custom",
                     });
-
-                    myModal.attach($(this));
-
-                    OSD.data.tooltips.push(myModal);
-                });
+                }
             });
         }
 

yarn.lock

@@ -1207,6 +1207,25 @@
     "@eslint/core" "^0.12.0"
     levn "^0.4.1"
 
+"@floating-ui/core@^1.1.0":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.2.tgz#3d1c35263950b314b6d5a72c8bfb9e3c1551aefd"
+  integrity sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/dom@~1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.1.tgz#66aa747e15894910869bf9144fc54fc7d6e9f975"
+  integrity sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==
+  dependencies:
+    "@floating-ui/core" "^1.1.0"
+
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
+
 "@fortawesome/fontawesome-free@^6.5.2":
   version "6.7.2"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.7.2.tgz#8249de9b7e22fcb3ceb5e66090c30a1d5492b81a"
@@ -4865,6 +4884,14 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.3.tgz#67c8fad95454a7c7abebf74bb78ee74a44023358"
   integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
 
+floating-vue@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-5.2.2.tgz#e263932042753f59f3e36e7c1188f3f3e272a539"
+  integrity sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==
+  dependencies:
+    "@floating-ui/dom" "~1.1.1"
+    vue-resize "^2.0.0-alpha.1"
+
 flush-write-stream@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -6419,13 +6446,6 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
-jbox@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/jbox/-/jbox-1.3.3.tgz#7bfc5f2c89eb3f4dd5185ce6b56a5f9875d70692"
-  integrity sha512-aayuZDf4Dc3w/adEdixUetNxJMIbThgt3r9Gfsxh8rWqBBEM3ODKON3YWSwpjgy7BzUHQjIeZ2sdPwV8RSVW6w==
-  dependencies:
-    jquery "^3.6.0"
-
 jquery-textcomplete@^1.8.5:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/jquery-textcomplete/-/jquery-textcomplete-1.8.5.tgz#df9724b42c3af9ece272356a7e8b55cd9cf239dd"
@@ -6443,7 +6463,7 @@ jquery-ui@^1.14.1:
   dependencies:
     jquery ">=1.12.0 <5.0.0"
 
-[email protected], "jquery@>=1.12.0 <5.0.0", jquery@^3.6.0:
+[email protected], "jquery@>=1.12.0 <5.0.0":
   version "3.6.3"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.3.tgz#23ed2ffed8a19e048814f13391a19afcdba160e6"
   integrity sha512-bZ5Sy3YzKo9Fyc8wH2iIQK4JImJ6R0GWI9kL1/k7Z91ZBNgkRXE6U0JfHIizZbort8ZunhSI3jw9I6253ahKfg==
@@ -10240,6 +10260,11 @@ vue-loader@^17.4.2:
     hash-sum "^2.0.0"
     watchpack "^2.4.0"
 
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-template-compiler@^2.7.16:
   version "2.7.16"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"