CodeIgniter项目中FullCalendar结合Bootstrap时Tooltip无法显示

我之前也碰到过完全一样的问题！Bootstrap的CSS会和FullCalendar官方推荐的tooltip.js方案产生样式冲突——虽然DOM里能看到tooltip元素，但Bootstrap的默认样式会把它隐藏起来。下面给你两个靠谱的解决办法：

方案1：自定义CSS覆盖Bootstrap的冲突样式 #

Bootstrap的.tooltip类默认设置了opacity: 0和pointer-events: none，而tooltip.js是通过切换aria-hidden属性来控制显示/隐藏的。我们只需要针对aria-hidden=false的tooltip元素强制覆盖这些样式就行：

/* 确保tooltip在需要显示时可见 */
.tooltip[aria-hidden=false] {
  opacity: 1 !important;
  pointer-events: auto !important;
}

把这段CSS放在你的自定义样式文件里，或者放在FullCalendar CSS之后的<style>标签中，就能让原来的tooltip.js方案正常工作了。

方案2：改用Bootstrap原生Tooltip组件（更推荐） #

既然已经引入了Bootstrap，不如直接用它自带的Tooltip组件，这样从根源上避免样式冲突，还不用额外引入tooltip.js。步骤如下：

1. 首先确保你已经引入了Bootstrap的JS文件（放在Popper.js之后，因为Bootstrap 4依赖Popper）：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

2. 在FullCalendar的eventRender回调中初始化Bootstrap Tooltip，把房间、讲师等额外信息传入：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 你的日历配置（比如日程来源、视图模式等）
    events: '/your-events-endpoint',
    eventRender: function(info) {
      // 构建包含额外信息的tooltip内容
      const tooltipContent = `
        <strong>${info.event.title}</strong><br>
        房间: ${info.event.extendedProps.room || '未指定'}<br>
        讲师: ${info.event.extendedProps.lecturer || '未指定'}
      `;
      // 初始化Bootstrap Tooltip
      new bootstrap.Tooltip(info.el, {
        title: tooltipContent,
        html: true, // 允许显示HTML格式的内容
        placement: 'top',
        trigger: 'hover'
      });
    },
    // 记得在事件销毁时清理tooltip，避免内存泄漏
    eventDestroy: function(info) {
      bootstrap.Tooltip.getInstance(info.el)?.dispose();
    }
  });
  calendar.render();
});

这个方案的优势是完全贴合Bootstrap的生态，不会有样式冲突，而且Tooltip的样式会和你项目里的Bootstrap风格保持一致。

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