Replace jBox tooltips with Tippy.js tooltips, remove jBox assets and references (#4582)

Author: DavidAnson

package.json

@@ -53,7 +53,6 @@
     "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",
@@ -70,6 +69,7 @@
     "switchery-latest": "^0.8.2",
     "three": "^0.176.0",
     "tiny-emitter": "^2.1.0",
+    "tippy.js": "^6.3.7",
     "vite-plugin-pwa": "^1.0.0",
     "vue": "^3.5.13"
   },

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 tippy from "tippy.js";
+import "tippy.js/dist/tippy.css";
 import I18NextVue from "i18next-vue";
 import FC from "../js/fc.js";
 import MSP from "../js/msp.js";
@@ -38,6 +40,18 @@ const betaflightModel = reactive({
     CONNECTION,
 });
 
+tippy.setDefaultProps({
+    allowHTML: true,
+    appendTo: () => document.body,
+    delay: 100,
+    interactive: true,
+    placement: "right",
+    theme: "custom",
+    // Un-comment for debugging:
+    // hideOnClick: false,
+    // trigger: 'click',
+});
+
 i18next.on("initialized", function () {
     console.log("i18n initialized, starting Vue framework");
 

src/css/main.less

@@ -1631,11 +1631,19 @@ button.active {
     border: 1px solid var(--primary-600);
     color: #000;
 }
-.jBox-Tooltip {
-    max-width: 180px;
+.tippy-box[data-theme~="custom"] {
+    background: var(--surface-300);
+    border: 2px solid var(--primary-500);
+    border-radius: 0.5rem;
+    color: var(--text);
+}
+.tippy-box[data-theme~="custom"][data-placement^="right"] > .tippy-arrow:before {
+    border-right-color: var(--primary-500);
+    left: -9px;
 }
-.jBox-Widetip {
-    max-width: 300px;
+.tippy-box[data-theme~="custom"][data-placement^="left"] > .tippy-arrow:before {
+    border-left-color: var(--primary-500);
+    right: -9px;
 }
 .hidden {
     display: none;
@@ -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 tippy from "tippy.js";
 import $ from "jquery";
 import { getOS } from "./utils/checkBrowserCompatibility";
 
@@ -290,35 +290,17 @@ 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",
+            $(".cf_tip, .cf_tip_wide").each((_, element) => {
+                const jQueryElement = $(element);
+                const attrTitle = jQueryElement.attr("title");
+                if (attrTitle && !element._tippy) {
+                    tippy(element, {
+                        content: attrTitle,
+                    });
+                    jQueryElement.removeAttr("title");
+                }
             });
         });
 

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 tippy from "tippy.js";
 import inflection from "inflection";
 import debounce from "lodash.debounce";
 import $ from "jquery";
@@ -3937,28 +3937,22 @@ 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) {
+                    element._tippy?.destroy();
+                }
+                // Attach new tooltips
+                OSD.data.tooltips = $(".osd_tip").toArray();
+                for (const element of OSD.data.tooltips) {
+                    const jQueryElement = $(element);
+                    const attrTitle = jQueryElement.attr("title");
+                    if (attrTitle && !element._tippy) {
+                        tippy(element, {
+                            content: attrTitle,
+                        });
+                        jQueryElement.removeAttr("title");
+                    }
                 }
-                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",
-                    });
-
-                    myModal.attach($(this));
-
-                    OSD.data.tooltips.push(myModal);
-                });
             });
         }
 

yarn.lock

@@ -1607,6 +1607,11 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.1.1.tgz#1ec17e2edbec25c8306d424ecfbf13c7de1aaa31"
   integrity sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==
 
+"@popperjs/core@^2.9.0":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
 "@quanle94/innosetup@^6.0.2":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@quanle94/innosetup/-/innosetup-6.0.2.tgz#b678b67240486302a08e3469151faca2c29f80ab"
@@ -6424,13 +6429,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"
@@ -6448,7 +6446,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==
@@ -9635,6 +9633,13 @@ tinyspy@^3.0.2:
   resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
   integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
 
+tippy.js@^6.3.7:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 title-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"