Switch tooltips to use jQuery UI

TotallyInformation · Oct 21, 2023 · a8b16d2 · a8b16d2
1 parent 816f281
commit a8b16d2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 50 deletions.
diff --git a/nodes/uib-element/customNode.html b/nodes/uib-element/customNode.html
@@ -29,33 +29,26 @@
 </template>
 
 <style>
-    #uib-el *[aria-label] {
-        position:relative;
-    }
-    #uib-el *[aria-label]::after {
-        content: attr(aria-label);
-        position:absolute;
-        top:100%;left:50px;
-        box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-        border: 1px solid var(--red-ui-form-input-border-color);
-        padding: 10px;
-        z-index: 999;
+    .ui-tooltip {
         background-color: var(--red-ui-popover-background);
         color: var(--red-ui-popover-color);
-        max-width: 350px;
-        text-decoration: none;
-        text-align: center;
-        border-radius: 6px;
-        white-space: break-spaces;
-
-        visibility: hidden;
-        opacity: 0;
-        transition: all 0.5s ease-out;
     }
-    #uib-el *[aria-label]:hover::after {
-        visibility: visible;
-        opacity: 1;
-        transition: all 0.5s ease-in 1s !important;
+    .custom-combobox {
+        position: relative;
+        display: inline-block;
+        width: 70%;
+    }
+    .custom-combobox-toggle {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin-left: -1px;
+        padding: 0;
+    }
+    .custom-combobox-input {
+        margin: 0;
+        padding: 5px 10px;
+        width: 85% !important;
     }
 </style>
 
@@ -350,7 +343,7 @@ <h3>Details</h3>
     /* eslint-disable strict, sonarjs/no-duplicate-string, sonarjs/no-duplicated-branches */
 
     // Isolate this code
-    (function () {
+    ;(function () {
         'use strict'
 
         /** Module name must match this nodes html file @constant {string} moduleName */
@@ -603,6 +596,25 @@ <h3>Details</h3>
         // Standard width for typed input fields
         const tiWidth = '68.5%'
 
+        /** Add jQuery UI formatted tooltips */
+        function doTooltips() {
+            // Select our page elements
+            $('#uib-el').tooltip({
+                items: 'img[alt], [aria-label], [title]',
+                track: true,
+                content: function() {
+                    const element = $( this )
+                    if ( element.is( '[title]' ) ) {
+                        return element.attr( 'title' )
+                    } else if ( element.is( '[aria-label]' ) ) {
+                        return element.attr( 'aria-label' )
+                    } else if ( element.is( 'img[alt]' ) ) {
+                        return element.attr( 'alt' )
+                    } else return ''
+                },
+            })
+        }
+
         /** Prep for edit
          * @param {*} node A node instance as seen from the Node-RED Editor
          */
@@ -777,6 +789,8 @@ <h3>Details</h3>
                 label: 'Element Config'
             })
 
+            doTooltips()
+
         } // ----- end of onEditPrepare() ----- //
 
         /** Prep for save

diff --git a/nodes/uib-element/customNode.js b/nodes/uib-element/customNode.js
@@ -28,6 +28,7 @@
 //#region ----- Module level variables ---- //
 
 const { promisify } = require('util')
+// const uibFs  = require('../libs/fs')   // File/folder handling library (by Totally Information)
 
 /** Main (module) variables - acts as a configuration object
  *  that can easily be passed around.

diff --git a/src/editor/uib-element/editor.js b/src/editor/uib-element/editor.js
@@ -1,7 +1,7 @@
 /* eslint-disable strict, sonarjs/no-duplicate-string, sonarjs/no-duplicated-branches */
 
 // Isolate this code
-(function () {
+;(function () {
     'use strict'
 
     /** Module name must match this nodes html file @constant {string} moduleName */
@@ -254,6 +254,25 @@
     // Standard width for typed input fields
     const tiWidth = '68.5%'
 
+    /** Add jQuery UI formatted tooltips */
+    function doTooltips() {
+        // Select our page elements
+        $('#uib-el').tooltip({
+            items: 'img[alt], [aria-label], [title]',
+            track: true,
+            content: function() {
+                const element = $( this )
+                if ( element.is( '[title]' ) ) {
+                    return element.attr( 'title' )
+                } else if ( element.is( '[aria-label]' ) ) {
+                    return element.attr( 'aria-label' )
+                } else if ( element.is( 'img[alt]' ) ) {
+                    return element.attr( 'alt' )
+                } else return ''
+            },
+        })
+    }
+
     /** Prep for edit
      * @param {*} node A node instance as seen from the Node-RED Editor
      */
@@ -428,6 +447,8 @@
             label: 'Element Config'
         })
 
+        doTooltips()
+
     } // ----- end of onEditPrepare() ----- //
 
     /** Prep for save

diff --git a/src/editor/uib-element/main.html b/src/editor/uib-element/main.html
@@ -19,33 +19,26 @@
 </template>
 
 <style>
-    #uib-el *[aria-label] {
-        position:relative;
-    }
-    #uib-el *[aria-label]::after {
-        content: attr(aria-label);
-        position:absolute;
-        top:100%;left:50px;
-        box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
-        border: 1px solid var(--red-ui-form-input-border-color);
-        padding: 10px;
-        z-index: 999;
+    .ui-tooltip {
         background-color: var(--red-ui-popover-background);
         color: var(--red-ui-popover-color);
-        max-width: 350px;
-        text-decoration: none;
-        text-align: center;
-        border-radius: 6px;
-        white-space: break-spaces;
-
-        visibility: hidden;
-        opacity: 0;
-        transition: all 0.5s ease-out;
     }
-    #uib-el *[aria-label]:hover::after {
-        visibility: visible;
-        opacity: 1;
-        transition: all 0.5s ease-in 1s !important;
+    .custom-combobox {
+        position: relative;
+        display: inline-block;
+        width: 70%;
+    }
+    .custom-combobox-toggle {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin-left: -1px;
+        padding: 0;
+    }
+    .custom-combobox-input {
+        margin: 0;
+        padding: 5px 10px;
+        width: 85% !important;
     }
 </style>