【tippy】tippy在FullCalendar中使用,始终被事件遮挡问题

项目场景:

提示:这里简述项目相关背景:
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元素的最外层,保证了不会在事件组件中被遮盖

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值