Use separate class for tippy targets (#20742)

Previous solution that re-purposed the 'hide' class by making it
`!important` had various unintended side-effects where jQuery .show() was
not able to outweight it. Use a separate class to prevent these
interactions.

3 files changed, 10 insertions, 4 deletions

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 87f9e8a4b0..6f3adadddc 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -12,10 +12,11 @@ export function createTippy(target, opts = {}) {
     ...opts,
   });
 
-  // for popups where content refers to a DOM element, we use the 'hide' class to initially hide
-  // the content, now we can remove it as the content has been removed from the DOM by tippy
+  // for popups where content refers to a DOM element, we use the 'tippy-target' class
+  // to initially hide the content, now we can remove it as the content has been removed
+  // from the DOM by tippy
   if (opts.content instanceof Element) {
-    opts.content.classList.remove('hide');
+    opts.content.classList.remove('tippy-target');
   }
 
   return instance;
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index f2711c4482..17e9ccfd35 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1315,7 +1315,7 @@ footer {
 }
 
 .hide {
-  display: none !important;
+  display: none;
 
   &.show-outdated {
     display: none !important;
diff --git a/web_src/less/modules/tippy.less b/web_src/less/modules/tippy.less
index 1fcd0372ce..25dd7fc987 100644
--- a/web_src/less/modules/tippy.less
+++ b/web_src/less/modules/tippy.less
@@ -1,5 +1,10 @@
 /* styles are based on node_modules/tippy.js/dist/tippy.css */
 
+// class to hide tippy target elements on page load
+.tippy-target {
+  display: none !important;
+}
+
 [data-tippy-root] {
   max-width: calc(100vw - 10px);
 }