Angular项目中FullCalendar v5的Tooltip悬停不生效问题咨询

常见原因 #

• 局部Tooltip实例被垃圾回收：在eventDidMount回调内部用局部变量声明Tooltip实例，回调执行结束后实例会被JS引擎自动回收，导致悬停事件无法触发对应逻辑。
• Tooltip库依赖不匹配：如果使用Bootstrap官方Tooltip，需要确保同时正确引入Popper.js依赖，且版本与Bootstrap主版本适配。Bootstrap 5的Tooltip构造函数挂载在全局bootstrap对象下，无法直接调用全局Tooltip。
• 自定义事件内容阻断鼠标交互：自定义eventContent生成的DOM元素如果存在pointer-events: none样式，或者层级低于其他覆盖元素，会导致鼠标事件无法被捕获。
• Tooltip内容为空无渲染：如果info.event.extendedProps.description为空值，Bootstrap Tooltip默认不会渲染弹窗，需要添加兜底显示内容。
• Angular绑定缺失：未将calendarOptions正确绑定到FullCalendar组件的[options]输入属性，或回调函数this指向错误导致逻辑异常。

修正后配置代码 #

// 若使用Bootstrap 5需提前声明全局bootstrap对象，已在angular.json引入对应js、css资源可忽略引入步骤
declare var bootstrap: any;

this.calendarOptions = {
  timeZone: 'UTC',
  initialView: 'resourceTimelineDay',
  aspectRatio: 1.5,
  resourceAreaWidth: '200px',
  slotMinWidth: 300,
  contentHeight: 1000,
  height: 1000,
  headerToolbar: {
    left: 'prev,next',
    center: 'title',
    right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
  },
  editable: true,
  resourceAreaHeaderContent: 'Rooms',
  resources: this._resources,
  events: evts,
  eventContent: (arg) => {
    let divEl = document.createElement('div');
    // 手动开启元素鼠标交互，避免被样式阻断
    divEl.style.pointerEvents = 'auto';
    let htmlTitle = arg.event._def.extendedProps['html'];
    if (arg.event.extendedProps.isHTML) {
      divEl.innerHTML = htmlTitle;
    } else {
      divEl.innerHTML = arg.event.title + '<br><span style="color: #0a0a0a">' + arg.event.title + '</span>';
    }
    return { domNodes: [divEl] };
  },
  eventDidMount: (info) => {
    // 将Tooltip实例挂载到事件元素上，避免被垃圾回收
    info.el.tooltip = new bootstrap.Tooltip(info.el, {
      title: info.event.extendedProps.description || '暂无描述', // 新增空内容兜底
      placement: 'top',
      trigger: 'hover',
      container: 'body',
      html: true // 需在Tooltip中渲染HTML内容可开启该配置
    });
  },
  // 新增事件卸载时销毁Tooltip逻辑，避免内存泄漏
  eventWillUnmount: (info) => {
    if (info.el.tooltip) {
      info.el.tooltip.dispose();
    }
  }
}

内容的提问来源于stack exchange，提问作者Matthieu