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.

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);
 }