jquery - 当我使用 bootstrap css 时，工具提示在 fullcalendar 中不起作用

Question

我正在尝试在我的 fullcalendar 应用程序中显示工具提示。但是如果我包含 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

编辑:显示问题的 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