Prototype of replacing jBox tooltips with native HTML/CSS

Author: DavidAnson

locales/en/messages.json

@@ -3645,7 +3645,7 @@
         "message": "Select or detect your board to see available online firmware releases - Select the correct firmware appropriate for your board."
     },
     "firmwareFlasherOnlineSelectBoardHint": {
-        "message": "Betaflight configurator supports flashing of Unified Targets with the respective board specific configurations in one step.<br><br>The concept of Unified Targets means that the same firmware .hex file can be used for all boards using the same MCU.<br><br>Betaflight 4.4 introduces <strong>Cloud Build</strong><br><br>With <strong>Cloud Build</strong> we need to define hardware options present on your build.<br><br>To make the different boards work with the same firmware, a specific configuration file is deployed alongside the firmware when a Unified Target is flashed.<br><br>With Local build you can load a unified target configuration file or chose a board before loading a firmware .hex file.<br><br>If you encounter problems using the firmware, please consider joining Discord or open an <a href=\"https://github.com/betaflight/betaflight/issues\" target=\"_blank\" rel=\"noopener noreferrer\">issue</a>."
+        "message": "Betaflight configurator supports flashing of Unified Targets with the respective board specific configurations in one step.\n\nThe concept of Unified Targets means that the same firmware .hex file can be used for all boards using the same MCU.\n\nBetaflight 4.4 introduces Cloud Build\n\nWith Cloud Build we need to define hardware options present on your build.\n\nTo make the different boards work with the same firmware, a specific configuration file is deployed alongside the firmware when a Unified Target is flashed.\n\nWith Local build you can load a unified target configuration file or chose a board before loading a firmware .hex file.\n\nIf you encounter problems using the firmware, please consider joining Discord or open an issue: https://github.com/betaflight/betaflight/issues."
     },
     "firmwareFlasherOnlineSelectFirmwareVersionDescription": {
         "message": "Select firmware version for your board."

src/css/main.less

@@ -1172,7 +1172,7 @@ dialog {
     gap: 0.5rem;
     white-space: nowrap;
     align-items: center;
-    overflow-x: hidden;
+    //overflow-x: hidden;
     border-radius: 999px;
     .switchery {
         margin-top: -3px;
@@ -1624,6 +1624,61 @@ button.active {
     border: 1px solid var(--primary-600);
     color: #000;
 }
+//*
+.cf_tip,
+.cf_tip_wide {
+    position: relative;
+}
+.cf_tip:hover,
+.cf_tip_wide:hover {
+    opacity: 1 !important;
+    z-index: 10000 !important;
+}
+.cf_tip:hover:before,
+.cf_tip:hover:after,
+.cf_tip_wide:hover:before,
+.cf_tip_wide:hover:after {
+    display: block;
+}
+.cf_tip:before,
+.cf_tip_wide:before {
+    content: "";
+
+    display: none;
+    left: 100%;
+    //right: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+
+    border: 6px solid;
+    border-color: transparent transparent transparent var(--primary-500);
+}
+.cf_tip:after,
+.cf_tip_wide:after {
+    content: attr(title);
+    font-size: 12px;
+    font-weight: normal;
+    text-wrap: wrap;
+    white-space: pre-wrap;
+
+    display: none;
+    left: 100%;
+    margin-left: 12px;
+    //right: 100%;
+    //margin-right: 12px;
+    position: absolute;
+    width: 250px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    background: var(--surface-300);
+    border: 2px solid var(--primary-500);
+    border-radius: 0.5rem;
+    color: var(--text);
+    padding: 8px;
+}
+//*/
 .jBox-Tooltip {
     max-width: 180px;
 }

src/css/tabs/pid_tuning.less

@@ -90,7 +90,7 @@
             height: 10px;
             font-weight: normal;
             text-overflow: ellipsis;
-            overflow: hidden;
+            //overflow: hidden;
             color: var(--text);
         }
         tr {
@@ -1095,7 +1095,7 @@
                 div {
                     .xs {
                         text-overflow: ellipsis;
-                        overflow: hidden;
+                        //overflow: hidden;
                         white-space: nowrap;
                     }
                 }

src/js/gui.js

@@ -292,6 +292,7 @@ class GuiControl {
 
         // loading tooltip
         $(function () {
+            /*
             new jBox("Tooltip", {
                 attach: ".cf_tip",
                 trigger: "mouseenter",
@@ -320,6 +321,7 @@ class GuiControl {
                 },
                 outside: "x",
             });
+            */
         });
 
         if (callback) {