带有bootstrap popover z-Index问题的Fullcalendar

Question

我正在尝试集成完整的日历调度程序和bootstrap popover。但是，我遇到了这个UI问题。

我尝试为popover设置z-index以及我的popover内部html。什么都行不通。

这是我的小提琴链接https://jsfiddle.net/87977p1x/5/

点击事件2，您可以看到弹出窗口。这是fullcalander

中的popover代码

eventRender: function (event, element) {

                    element.popover({
                        trigger: "click",

                        title: '<div class="label label-lg label-primary col-xs-12">' + event.title + '</div>',
                        html: true,
                        content: '<div style="width:70px">My content goes here.. blahhh blahhhh<div><div> Some more content in this div having more nested HTML</div>',
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'

                    });
                }

尽管我增加了z-index，但过去3天经常尝试不知道为什么它会落后于此事件。

Answer 1

根据其他问题Fullcalendar with Twitter Bootstrap Popover，我应用container:'body'它有效..

 element.popover({
                    trigger: "click",
                    container:'body',
                    // other settings...

                });

Working JSFiddle

Answer 2

我更喜欢将它附加到.fc-scroller，以便在滚动日历时，弹出窗口将随事件一起滚动。

                element.popover({
                    trigger: "click",
                    container:$(element).closest('.fc-scroller');
                });