diff options
| author | silverwind <me@silverwind.io> | 2022-07-19 00:33:34 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-19 00:33:34 +0200 |
| commit | 00d3876c8582e6b706f5f21a7c57dfee209a017c (patch) | |
| tree | bca2ffd3ab16e1c64bc666e44cfee309c2d6f6bc /web_src/js/modules | |
| parent | 17ce5f86608b6d14309b772db0578f09bd034bbf (diff) | |
| download | gitea-00d3876c8582e6b706f5f21a7c57dfee209a017c.tar.gz gitea-00d3876c8582e6b706f5f21a7c57dfee209a017c.zip | |
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.
Diffstat (limited to 'web_src/js/modules')
| -rw-r--r-- | web_src/js/modules/tippy.js | 12 |
1 files changed, 12 insertions, 0 deletions
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, + }); +} |