Fixed: Fix tooltips display and styles leaks

Use natives browser tooltips instead of handmade tooltips. Fixes at least one glitch (OFBIZ-12730) due to styles leaking. Removes the global "transition: .2s" which leads to animate every single element modification (causes OFBIZ-13104, and possibly other problems/lagging). Only apply these transitions to buttons to keep a nice effect on hover. We may have to add other selectors if needed. OFBIZ-12638 OFBIZ-12730 OFBIZ-13104
apache · Nov 6, 2024 · b6643c5 · b6643c5
1 parent 13b59f3
commit b6643c5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 140 deletions.
diff --git a/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl b/themes/helveticus/template/macro/HtmlFormMacroLibrary.ftl
@@ -21,10 +21,7 @@ under the License.
 
 <#macro renderTooltip tooltip="" tooltipStyle="">
   <#if tooltip?has_content>
-    <span class="tooltipContainer<#if tooltipStyle?has_content> ${tooltipStyle}<#else> tooltip</#if>">
-    ${tooltip}
-    </span>
-    <i class="hidden"></i>
-  <#rt/>
+      <i class="hoverTooltip" title="${tooltip}"></i>
+      <#rt/>
   </#if>
 </#macro>
diff --git a/themes/helveticus/webapp/helveticus/helveticus-main-theme.less b/themes/helveticus/webapp/helveticus/helveticus-main-theme.less
@@ -108,15 +108,9 @@ span.label {
 }
 
 /*** BUTTON /LINK / NAV STYLES ***/
-// * { transition: .5s } is very (too) broad, it causes slowdowns on draggable/resizable elements like modals
-// (leads to animations for each new size/position, eventually each pixel...)
-// We should invert the logic here : transitions on chosen elements instead of everywhere except some elements.
-a, a:hover, *:not(.ui-dialog, .ui-dialog-content) {
+a, a:hover, input.buttontext, input[type="submit"] {
     text-decoration: none;
-    -o-transition: .5s;
-    -ms-transition: .5s;
-    -moz-transition: .5s;
-    -webkit-transition: .5s;
+    transition: .2s;
 }
 
 a {
@@ -1049,36 +1043,6 @@ label.has-checkbox, .has-radio {
         position: absolute;
         right: 1rem;
     }
-
-    .tooltip {
-        position: absolute;
-        white-space: nowrap;
-        top: 0.5rem;
-        margin-left: 1rem;
-    }
-
-    span.tooltip {
-        margin-top: 0.5rem;
-        position: static;
-        display: block;
-
-        > p {
-            position: absolute;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            width: 100%;
-            padding-bottom: 0.5rem;
-        }
-    }
-}
-
-span.tooltip {
-    position: absolute;
-    left: 0;
-    opacity: 0.7;
-    font-style: italic;
-    line-height: 1rem;
 }
 
 .has-checkbox {
@@ -1160,19 +1124,6 @@ span.tooltip {
         td {
             padding: 0.5rem;
             vertical-align: middle;
-
-            &.has-tooltip {
-                position: relative;
-
-                .field-lookup {
-                    padding-bottom: 0;
-                }
-
-                .tooltip {
-                    left: 0.5rem;
-                    top: -2.5rem
-                }
-            }
         }
 
         .button-col {
@@ -1292,11 +1243,6 @@ form .basic-table,
             padding: 0.5rem;
         }
 
-        &.has-tooltip td {
-            padding-bottom: 2.5rem;
-            position: relative;
-        }
-
         .label, .group-label {
             text-align: right;
             padding-right: 0.5rem;
@@ -1449,54 +1395,22 @@ form .basic-table,
     background: url("images/folder-open.svg") no-repeat center center !important;
 }
 
-#LevelSwitch td.has-tooltip {
-    padding: 0;
-
-    .has-checkbox {
-        margin: 0 0.7rem
-    }
-
-    .tooltip {
-        position: static;
-    }
-}
-
-.has-tooltip {
-    display: flex;
-    position: relative;
-    z-index: 90;
-
-    > i {
-        position: static;
-        z-index: 100;
-        height: 1.3rem;
-        width: 1.3rem;
-        border-radius: 2rem;
-        background-color: @border-color;
-        margin-left: 0.5rem;
-        font-style: normal;
-        cursor: pointer;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        &:before {
-            display: block;
-            content: "i";
-            font-weight: 600
-        }
-    }
+i.hoverTooltip {
+    display: inline-flex;
+    height: 1.3rem;
+    width: 1.3rem;
+    border-radius: 2rem;
+    background-color: @border-color;
+    margin-left: 0.5rem;
+    font-style: normal;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
 
-    > span.tooltipContainer {
-        position: absolute;
-        left: 0;
-        top: -3rem;
-        opacity: 1;
-        line-height: 1rem;
-        background: @grey-light;
-        padding: 0.8rem 1rem;
-        border-radius: 0.3rem;
-        font-weight: 500;
+    &:before {
+        display: block;
+        content: "i";
+        font-weight: 600
     }
 }
 

diff --git a/themes/helveticus/webapp/helveticus/js/helveticus.js b/themes/helveticus/webapp/helveticus/js/helveticus.js
@@ -18,54 +18,33 @@
  */
 
 function showHideUserPref() {
-    var userPref = document.getElementById("user-details");
+    const userPref = document.getElementById("user-details");
 
-    if(userPref.style.display == "none") {
+    if (userPref.style.display == "none") {
         userPref.style.display = "flex";
-    }
-    else {
+    } else {
         userPref.style.display = "none";
     }
 }
 
-function selectOrgaOK(orgaName){
-    var selectOrga = document.getElementById("orga"+orgaName);
-    var currentModal = document.getElementById("selectOrga");
+function selectOrgaOK(orgaName) {
+    const selectOrga = document.getElementById("orga" + orgaName);
+    const currentModal = document.getElementById("selectOrga");
     selectOrga.click();
     currentModal.style.visibility = "hidden";
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-    let tooltips = document.querySelectorAll('.tooltip'),
-        checkboxs = document.querySelectorAll('input[type=checkbox]'),
-        radios = document.querySelectorAll('input[type=radio]'),
-        lefts = document.querySelectorAll('.lefthalf');
-
-    tooltips.forEach(tooltip => {
-        tooltip.classList.add('hidden');
-
-        let ParentTooltip = tooltip.parentNode;
-        ParentTooltip.classList.add('has-tooltip');
-
-        let infoTooltips = ParentTooltip.querySelectorAll('i');
-
-        infoTooltips.forEach(infoTooltip => {
-            infoTooltip.classList.remove("hidden");
-            infoTooltip.addEventListener("mouseenter", function( event ) {
-                tooltip.classList.remove('hidden');
-            });
-            infoTooltip.addEventListener("mouseout", function( event ) {
-                tooltip.classList.add('hidden');
-            })
-        })
-    });
+document.addEventListener("DOMContentLoaded", function () {
+    const checkboxs = document.querySelectorAll('input[type=checkbox]');
+    const radios = document.querySelectorAll('input[type=radio]');
+    const lefts = document.querySelectorAll('.lefthalf');
 
     checkboxs.forEach(checkbox => {
         checkbox.parentNode.classList.add('has-checkbox');
     });
     radios.forEach(radio => {
         radio.parentNode.classList.add('has-radio');
-    }); 
+    });
     lefts.forEach(left => {
         left.parentNode.classList.add('screenlet-flex');
     });