如何在FullCalendar 5中集成Tooltip/Popper组件？

嘿，我来帮你搞定这个Tooltip的问题，刚好之前我在FullCalendar+Bootstrap 5的项目里也踩过类似的坑！

先解决eventRender的报错问题 #

你碰到的Unknown option 'eventRender'报错其实是版本问题——FullCalendar从v5开始就把eventRender这个钩子给移除了，官方现在推荐用eventDidMount来替代，所以你后来转用eventDidMount的方向完全是对的，不用再纠结eventRender啦。

为什么eventDidMount里的Tooltip没反应？ #

结合你用Bootstrap 5的情况，这里大概率是Tooltip的命名冲突+版本不兼容：

• Bootstrap 5本身就自带了Tooltip组件，而你额外引入了独立的tooltip.js，两者的构造函数都叫Tooltip，导致实际运行时调用的不是你想要的那个；
• 另外你引入的popper.js是v1版本，而Bootstrap 5依赖的是Popper v2，版本不匹配也会让Tooltip初始化失败。

给你一套能跑通的实现步骤 #

1. 调整依赖脚本（适配Bootstrap 5）

既然用了Bootstrap 5，直接用它自带的Tooltip就行，不用额外引那两个独立脚本。把你当前的Tooltip/Popper脚本删掉，确保Bootstrap 5的JS是完整引入的：

<!-- 用这个代替你之前的Popper和Tooltip脚本，Bootstrap 5 bundle已经包含了Popper v2 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2. 修改eventDidMount的代码

Bootstrap 5的Tooltip初始化方式和独立的tooltip.js有点不一样，调整你的JS代码：

eventDidMount: function(info) {
  // 注意这里要用bootstrap.Tooltip，避免和全局的Tooltip冲突
  new bootstrap.Tooltip(info.el, {
    title: info.event.title, // 这里直接用info.event.title就对了，你之前试的其他写法都不对
    placement: 'top',
    trigger: 'hover',
    container: 'body',
    // 如果你想用上你之前的自定义样式，加个template指定自定义类
    template: '<div class="tooltip style5" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
  });
}

3. 保留你的自定义CSS

你之前复制的那一大段CSS样式可以继续留着，它会自动作用于上面指定的style5类，Tooltip的样式就会符合你的预期啦。

额外的小提醒 #

• 确认你的FullCalendar版本是v5及以上，eventDidMount是这个版本才有的钩子；
• 如果你的事件会动态更新（比如修改标题），可以再加个eventDidUpdate钩子来同步Tooltip内容：

eventDidUpdate: function(info) {
  const tooltip = bootstrap.Tooltip.getInstance(info.el);
  if (tooltip) {
    tooltip.setContent({ '.tooltip-inner': info.event.title });
  }
}

• 如果还是没反应，打开控制台看看有没有隐藏的报错，比如元素被样式覆盖导致Tooltip看不见，或者初始化时找不到元素之类的。

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