添加 Bootstrap 和自定义事件指示器时出现 Fullcalendar 问题

问：

我正在将一个基于 Fullcalendar 1.x + Bootstrap 3 的旧项目迁移到最新版本的 Fullcalendar + Bootstrap 5。

为了显示假期，我们喜欢在日期旁边添加一个小图标，并使用工具提示来指示假期的内容，而不是使用背景事件，如屏幕截图所示。

这在没有 Bootstrap 的情况下工作正常，如此处所示

但是，一旦我添加 Bootstrap 的 CSS，如图所示，工具提示就会中断。

我也用 Bootstrap 的原生工具提示尝试过，它是一样的......这似乎是 Bootstrap 的 CSS 和 Fullcalendar 的 CSS 之间的冲突，但我找不到它。

我用来渲染事件工具提示的 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();
});