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:
parent
17ce5f8660
commit
00d3876c85
6 changed files with 135 additions and 11 deletions
12
web_src/js/modules/tippy.js
Normal file
12
web_src/js/modules/tippy.js
Normal 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,
|
||||
});
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue