css - Tippy.js z-index 不适用于交互性

Question

参考：https ://atomiks.github.io/tippyjs/

尽管interactive:true我指定了#main_container. 我怎样才能得到它“在一切的前面” interactive:true？

delegate( '#main_container', {
target: '[data-tippy-content]', allowHTML: true, 
interactive: true, placement: 'right', theme: 'light', zIndex: 99999
} );

另请参见此处：https ://github.com/projectje/bookmark以获取上述代码。我做了一个临时解决方法，在每个第一个字符后面放置一个 BR，这样它就不会流过其他框。但这确实是一个短期的解决方法。

Answer 1

默认情况下，tippy 会附加到参考元素的父元素interactive- 如果父元素是“包含块”，这可能会导致它被剪裁。

要修复使用以下之一：

• 使用popperOptions: { strategy: 'fixed' }, 或
• 指定appendTo: document.body+ 键盘使用的焦点管理