Replace fomantic popup module with tippy.js (#20428)

- replace fomantic popup module with tippy.js
- fix chaining and add comment
- add 100ms delay to tooltips
- stopwatch improvments, raise default maxWidth
- update web_src/js/features/common-global.js
- use type=submit instead of js

1 files changed, 46 insertions, 2 deletions

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 6fd466cd92..87f9e8a4b0 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -1,12 +1,56 @@
 import tippy from 'tippy.js';
 
-export function createTippy(target, opts) {
-  return tippy(target, {
+export function createTippy(target, opts = {}) {
+  const instance = tippy(target, {
     appendTo: document.body,
     placement: 'top-start',
     animation: false,
     allowHTML: true,
+    maxWidth: 500, // increase over default 350px
     arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
+    ...(opts?.role && {theme: opts.role}),
     ...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
+  if (opts.content instanceof Element) {
+    opts.content.classList.remove('hide');
+  }
+
+  return instance;
+}
+
+export function initTooltip(el, props = {}) {
+  const content = el.getAttribute('data-content') || props.content;
+  if (!content) return null;
+  return createTippy(el, {
+    content,
+    delay: 100,
+    role: 'tooltip',
+    ...props,
+  });
+}
+
+export function showTemporaryTooltip(target, content) {
+  let tippy, oldContent;
+  if (target._tippy) {
+    tippy = target._tippy;
+    oldContent = tippy.props.content;
+  } else {
+    tippy = initTooltip(target, {content});
+  }
+
+  tippy.setContent(content);
+  tippy.show();
+  tippy.setProps({
+    onHidden: (tippy) => {
+      if (oldContent) {
+        tippy.setContent(oldContent);
+      } else {
+        tippy.destroy();
+      }
+      tippy.setProps({onHidden: undefined});
+    },
+  });
 }