tippy.js 是一个很优秀的 web 气泡提示独立UI组件，轻量级无依赖，不仅支持纯文本提示，也支持强大的html内容，支持嵌套。
tippy.js 官网：atomiks.github.io/tippyjs
它支持四个主题：
-
light -
light-border -
material -
translucent
在light模式下我们鼠标放上几次会发现他的box-shadow会不断加深，这是不符合预期的
我们可以用一下两种方法解决它
1.自定义主题（官网例子也写得很明白）
// css
.tippy-box[data-theme~='red'] {
background-color: blue;
color: red;
// box-shadow: 0px 3px 5px -2px rgba(7, 88, 202, 0.12), // 0px 6px 8px 0px rgba(7, 88, 202, 0.06), // 0px 7px 14px 6px rgba(7, 88, 202, 0.05);
}
// 调用
tippy(targets, {
content: '内容', theme: 'red',
});
这样确实会解决这个问题，但当你需要给弹出框一个投影来和背景色进行区分的时候（把注释放开），这个问题依然存在！
那么我们就可以用第二种方法了
2.在该popover隐藏的时候，销毁这个实例，就可以了
tippy(info.el, { content: info.event.title, theme: 'red', maxWidth: 350, duration: 500, onHidden(info) {
// 销毁实例 info.destroy() return false }})
如有其他更好的解决方法，欢迎交流~
