项目场景:
提示:这里简述项目相关背景:
FullCalendar中使用,tippy 来做提示,结果tippy的气泡提示始终被事件遮挡问题
问题描述
就是我在使用tippy 提示日历表中的事件信息的时候,总是会在周日历和天日历中出现提示框被遮挡的情况,哪怕我把tippy的z-index调到了9999还是会被日历框中的事件遮挡
如下所示:
tippy(info.el, {
content: content,
placement: 'bottom',
theme: 'gradient',
interactive: true,
allowHTML: true,
arrow: true,
zIndex: 9999
})
解决方案:
增加一个属性 appendTo: document.body, 即可
tippy(info.el, {
content: content,
placement: 'bottom',
theme: 'gradient',
interactive: true,
appendTo: document.body,
allowHTML: true,
arrow: true,
zIndex: 9999
})
按照上面的方法配置之后,提示框就不会被FullCalendar中的事件遮挡了,大体原因好像是因为上面的配置会使得tippy的气泡提示框 直接挂在body元素的最外层,保证了不会在事件组件中被遮盖