From 00d3876c8582e6b706f5f21a7c57dfee209a017c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 19 Jul 2022 00:33:34 +0200
Subject: Use tippy.js for context popup (#20393)

By appending the tooltips to `document.body`, we can avoid any stacking context issues caused by surrounding element's CSS.

This uses [tippy.js](https://github.com/atomiks/tippyjs) instead of Fomantic popups. We should aim to replace all Fomantic popups with this eventually and then get rid of the Fomantic `popup` module completely.
---
 web_src/js/modules/tippy.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 web_src/js/modules/tippy.js

(limited to 'web_src/js/modules')

diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
new file mode 100644
index 0000000000..6fd466cd92
--- /dev/null
+++ b/web_src/js/modules/tippy.js
@@ -0,0 +1,12 @@
+import tippy from 'tippy.js';
+
+export function createTippy(target, opts) {
+  return tippy(target, {
+    appendTo: document.body,
+    placement: 'top-start',
+    animation: false,
+    allowHTML: true,
+    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,
+  });
+}
-- 
cgit v1.2.3