当我使用bootstrap CSS时，工具标记不在全面工作

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被排除在外。

编辑：我忘了补充说我还在使用mdbooostrap.css

编辑：链接到codepen显示问题：https：//codepen.io/anon/pen/wqkvyv。如果从CSS选项中删除Twitter-Bootstrap，则显示

Answer 1

发生这种情况，因为Bootstrap的CSS包括与.tooltip有关的规则。因此，这些CSS规则与您为Tooltip.js包含的规则存在冲突。

但Bootstrap包含其自己的工具提示功能，该功能也基于Popper.js ....因此，如果您已经在使用Bootstrap，那么您不需要Tooltip.js，只需使用Bootstrap。P>

确保您包括

popper.min.js
bootstrap.min.js

按该顺序和CSS，删除您的自定义工具提示CSS，只包括

bootstrap.min.css

在您的页面中。

在代码中，您可以使用Bootstrap Tooltip与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