当我使用 bootstrap css 时，工具提示在全日历中不起作用

Question

我正在尝试在我的全日历应用程序中显示工具提示。但是如果我包含 bootstrap.css 它就不起作用了。当我运行没有它的代码时，一切正常。

var calendar = new Calendar(calendarEl, {
  events: [
    {
      title: 'My Event',
      start: '2010-01-01',
      description: 'This is a cool event'
    }
    // more events here
  ],
  eventRender: function(info) {
    var tooltip = new Tooltip(info.el, {
      title: info.event.extendedProps.description,
      placement: 'top',
      trigger: 'hover',
      container: 'body'
    });
  }
});

使用 Fullcalendar.io 页面中的示例代码并排除 bootstrap.min.css 一切正常。

编辑：我忘了补充说我也在使用 mdboostrap.css

编辑：Link 到显示问题的 Codepen：https://codepen.io/anon/pen/WqKvYv。如果您从 CSS 选项中删除 twitter-bootstrap，则工具提示显示

Answer 1

发生这种情况是因为 Bootstrap's CSS 包含与 .tooltip 相关的规则。因此，这些 CSS 规则与您为 tooltip.js 包含的规则之间存在冲突。

但是 bootstrap 包括 its own tooltip functionality 也是基于 popper.js ....所以如果你已经在使用 Bootstrap 那么你不需要 tooltip.js 在上面，只使用 Bootstrap 个。

确保包含

popper.min.js
bootstrap.min.js

按此顺序，对于 CSS，删除您的自定义工具提示 CSS 并仅包含

bootstrap.min.css

在您的页面中。

在代码中，您可以对 Bootstrap 工具提示使用与 tooltip.js 相同的所有选项（因为它们都基于 popper.js）：

eventRender: function(info) {
  $(info.el).tooltip({ 
    title: info.event.extendedProps.description,
    placement: "top",
    trigger: "hover",
    container: "body"
  });
},

现场演示：https://codepen.io/ADyson82/pen/bPjgow

当我使用 bootstrap css 时，工具提示在全日历中不起作用

Tooltips not working in fullcalendar when i use bootstrap css

jquery

fullcalendar

bootstrap-4

mdbootstrap

fullcalendar-4