Angular中Fullcalendar触发的Tippy.js tooltip内元素无法点击如何解决

核心问题原因 #

• 重复在eventMouseEnter中初始化Tippy实例，导致事件绑定冲突、实例状态异常
• Tippy默认挂载到触发元素的父容器（FullCalendar内部节点），FullCalendar对内部节点做了全局点击事件捕获，拦截了Tooltip内部的交互
• Tippy内部点击事件向上冒泡到FullCalendar事件层，被其预设逻辑拦截

修复方案 #

1. 调整Tippy初始化时机

不要在鼠标进入事件中重复创建实例，改用FullCalendar的eventDidMount生命周期钩子，在日历事件节点首次渲染时一次性完成Tippy初始化，同时添加两项关键配置：

// FullCalendar 配置项
eventDidMount: function(info) {
  const template = document.getElementById('template');
  tippy(info.el, {
    content: template.innerHTML,
    allowHTML: true,
    interactive: true,
    interactiveBorder: 30,
    zIndex: 999999,
    theme: 'light',
    // 关键：将Tippy节点挂载到body，脱离FullCalendar的容器事件捕获范围
    appendTo: document.body,
    // 关键：阻止Tippy内部的点击事件向上冒泡
    onMount(instance) {
      instance.popper.addEventListener('click', (e) => {
        e.stopPropagation();
      });
    },
    // 可选配置：点击Tooltip外部区域自动关闭
    onClickOutside(instance) {
      instance.hide();
    }
  });
}

2. 清理冗余逻辑

删除原eventMouseEnter回调中的Tippy初始化代码，Tippy会默认响应鼠标悬浮事件自动弹出，不需要额外触发。

3. 动态内容适配（可选）

如果Tooltip内容需要和当前日历事件关联、动态生成，可以添加onShow钩子实时更新内容：

tippy(info.el, {
  // 保留其他原有配置
  onShow(instance) {
    // 从info对象中取当前事件的属性，组装成需要展示的内容
    const eventContent = `
      <div>事件名称：${info.event.title}</div>
      <div>事件时间：${info.event.start.toLocaleString()}</div>
      ${document.getElementById('template').innerHTML}
    `;
    instance.setContent(eventContent);
  }
})

内容的提问来源于stack exchange，提问作者Mr. Developer