如何为ap-angular2-fullcalendar实现动态Tooltip？

我之前在使用ap-angular2-fullcalendar给事件加Tooltip时，也踩过qtip和MatTooltip的坑——明明Tooltip加到DOM里了就是不生效，后来摸索出几个靠谱的解决办法，分享给你：

方法一：利用FullCalendar原生回调手动实现Tooltip #

ap-angular2-fullcalendar本质是对FullCalendar的封装，所以可以直接用它的eventRender回调来操作动态生成的事件元素，不管是用原生title还是自定义Tooltip都可行：

1. 简单版：原生title属性 #

如果对样式要求不高，直接给事件元素加原生title属性最省心：

// 组件内的FullCalendar配置
calendarOptions: any = {
  events: [
    {
      title: '团队会议',
      start: '2024-05-22',
      description: '下午2点在3楼会议室讨论项目进度'
    }
  ],
  eventRender: (event, element) => {
    // 把事件的description赋值给元素的title属性
    element.attr('title', event.description);
  }
};

模板里正常引用组件：

<angular2-fullcalendar [options]="calendarOptions"></angular2-fullcalendar>

2. 自定义样式版：手动创建Tooltip元素 #

如果想要自定义Tooltip的样式，可以在鼠标进出事件里手动创建和销毁Tooltip：

calendarOptions: any = {
  events: [...],
  eventRender: (event, element) => {
    // 鼠标进入时创建Tooltip
    element.on('mouseenter', () => {
      const tooltip = document.createElement('div');
      tooltip.className = 'custom-event-tooltip';
      tooltip.textContent = event.description;
      // 定位到事件元素下方
      const rect = element[0].getBoundingClientRect();
      tooltip.style.top = `${rect.bottom + window.scrollY + 5}px`;
      tooltip.style.left = `${rect.left + window.scrollX}px`;
      document.body.appendChild(tooltip);
      // 存起来方便销毁
      element.data('tooltip', tooltip);
    });

    // 鼠标离开时销毁Tooltip
    element.on('mouseleave', () => {
      const tooltip = element.data('tooltip');
      if (tooltip) {
        document.body.removeChild(tooltip);
        element.removeData('tooltip');
      }
    });
  }
};

然后在全局CSS里加样式：

.custom-event-tooltip {
  position: absolute;
  background-color: #2c3e50;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

方法二：让MatTooltip正常生效 #

之前MatTooltip不工作大概率是因为事件元素是动态生成的，Angular没有正确识别指令。可以通过eventRender回调手动初始化MatTooltip：

首先确保已经导入了MatTooltipModule到你的模块里，然后在组件里注入依赖：

import { ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { MatTooltip } from '@angular/material/tooltip';

constructor(
  private cfr: ComponentFactoryResolver,
  private vcr: ViewContainerRef
) {}

然后在eventRender里初始化Tooltip：

calendarOptions: any = {
  events: [...],
  eventRender: (event, element) => {
    // 创建MatTooltip组件实例
    const tooltipFactory = this.cfr.resolveComponentFactory(MatTooltip);
    const tooltipComp = this.vcr.createComponent(tooltipFactory);
    
    // 设置Tooltip内容
    tooltipComp.instance.message = event.description;
    // 绑定到事件元素上
    tooltipComp.instance.ngElementRef = { nativeElement: element[0] } as any;
    // 可以设置显示延迟等参数
    tooltipComp.instance.showDelay = 300;
    
    // 触发变更检测
    tooltipComp.changeDetectorRef.detectChanges();
  }
};

方法三：修复qtip的初始化问题 #

如果之前用qtip没成功，大概率是初始化时机不对——要等事件元素完全渲染完成后再初始化qtip，用eventAfterRender回调代替eventRender：

calendarOptions: any = {
  events: [...],
  eventAfterRender: (event, element) => {
    // 确保qtip的JS和CSS已经正确引入项目
    $(element).qtip({
      content: event.description,
      position: {
        my: 'bottom center',
        at: 'top center',
        adjust: { y: -5 }
      },
      style: {
        classes: 'qtip-dark'
      }
    });
  }
};

这些方法我都试过，亲测有效，你可以根据自己的需求选最合适的~

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