html - tippy.js popover 隐藏在事件槽后面

Question

我正在使用FullCalendar，并且我只是将tippyJs 集成到popover中。它存在与似乎是 zIndex 相关的布局问题。我附上了我的问题的截图。您可以看到弹出框隐藏在事件包装器后面。另外它也是不可点击的。我可以使用一些帮助来显示任何上方的完整弹出框。非常感谢您的帮助。谢谢

tippy(arg.el, {
    content: ReactDOMServer.renderToStaticMarkup(
      //my html for popover
    ),
    allowHTML: true,
    placement: 'auto',
    interactive: true,
    theme: 'light',
    zIndex: 9999,
});

Answer 1

我不知道您是否找到了解决方案，但我遇到了同样的问题。tippy.js 和 popper 的库 (CSS) 被严重导入。

所以我只需要在 index.html 中添加 cdn 文件就可以了。

我在 index.html 中有这些文件

    <!-- Development -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>

<!-- Production -->
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js">


tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
  //my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,

});

删除交互式参数，它应该正常工作:)