'tippy.js popover is hiding behind events slots

I'm using FullCalendar and I just integrated tippyJs for popover. It is having layout issues related to what seems to be zIndex. I have attached the Screenshot of my problem. You can see that popover is hiding behind the event wrapper. plus it is also not clickable. I can use some help in showing complete popover box above anything. Your help is greatly appreciated. Thanksenter image description here

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


Solution 1:[1]

I don't know if you found a solution about it but I had the same problem. The library (CSS) was badly imported for tippy.js and popper.

So I just had to add the cdn file in the index.html and all worked fine.

I had these files in 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,

});

Remove the interactive params, it should normaly works :)

Solution 2:[2]

tippy v6.x has prop appendTo read here so you can try appendTo: () => document.body

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ruddy

Related Questions