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.
This commit is contained in:
silverwind 2022-07-19 00:33:34 +02:00 committed by GitHub
parent 17ce5f8660
commit 00d3876c85
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 135 additions and 11 deletions

View file

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