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

编辑：链接到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的。 / p>

确保您包含

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时，工具提示无法在Fullcalendar中工作

1 个答案: