You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

引入Bootstrap后FullCalendar自定义事件提示工具失效问题排查

FullCalendar + Bootstrap 5 集成后日期旁Tooltip失效问题

我正在将基于FullCalendar 1.x + Bootstrap 3的旧项目迁移至最新版FullCalendar + Bootstrap 5。为展示节假日,我们未使用背景事件,而是在日期旁添加小图标并通过Tooltip说明节假日信息,该效果在不引入Bootstrap CSS时可正常运行,但添加Bootstrap CSS后Tooltip失效,尝试Bootstrap原生Tooltip也存在相同问题,推测是两者CSS冲突,但无法定位。

用于渲染事件Tooltip的JS代码如下:

// import bootstrap5Plugin from '@fullcalendar/bootstrap5';

var DateTime = luxon.DateTime;

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {
    timeZone: 'local',
    // plugins: [
    //   bootstrap5Plugin,
    // ],
    headerToolbar: {
      start: 'prev,today,next',
      center: 'title',
      end: 'dayGridMonth,dayGridWeek,dayGridDay'
    },
    // themeSystem: 'bootstrap5',
    eventDidMount: function(info) {
      const element = info.el;
      const event = info.event;

      const date = DateTime.fromJSDate(event.start).toFormat('yyyy-MM-dd');
      const cell = document.querySelector(`td[data-date="${date}"] .fc-daygrid-day-top`);
      if (cell != null) {
        var ta = document.createElement('a');
        ta.setAttribute('data-bs-toggle', 'tooltip');
        ta.setAttribute('data-bs-title', event.title);
        ta.setAttribute('data-bs-placement', 'top');
        ta.setAttribute('href', 'https://google.com');
        ta.innerText = 'xxx';
        cell.appendChild(ta);
        
        var tooltipDay = new Tooltip(ta, {
          title: info.event.extendedProps.description,
          placement: 'top',
          trigger: 'hover',
          container: 'body'
        });
      }
      
      var tooltip = new Tooltip(info.el, {
        title: info.event.extendedProps.description,
        placement: 'top',
        trigger: 'hover',
        container: 'body'
      });
    },

    events: [{
      "title": "All Day Event",
      "description": 'description for All Day Event',
      "start": "2023-10-04"
    }],
    editable: false,
    selectable: false
  });

  calendar.render();
});

内容的提问来源于stack exchange,提问作者pgb

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 17:07:34