当我使用Bootstrap CSS时，fullcalendar中的工具提示无法正常工作。

Question

当我使用Bootstrap CSS时，fullcalendar中的工具提示无法正常工作。

jquerybootstrap-4fullcalendarmdbootstrapfullcalendar-4

5

我正在尝试在我的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，则提示框将显示。

- tomas

1

很可能是CSS规则冲突了。你使用的是哪个工具提示库？如果你使用开发者工具检查DOM，就能看到哪些规则导致了问题，并删除/修改它们。 - Rory McCrossan

1

“not working” 意味着什么？是没有显示任何内容吗？还是显示的内容有误？请为我们创建一个最小可复现示例，以便我们可以尝试跟踪问题。 - ADyson

这里有一个示例链接，提示框没有显示。如果从CSS选项中删除twitter-bootstrap，则提示框会显示。 - tomas

我在这里找到了解决方案：https://stackoverflow.com/questions/55773470/bootstrap-css-breaks-tooltip-popover - tomas

“new Tooltip”元素来自哪里？ - SkogensKonung

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ADyson · Accepted Answer

这是因为 Bootstrap的CSS 包含与 .tooltip 相关的规则。因此，Bootstrap的CSS规则与您为 tooltip.js 包含的规则之间存在冲突。

但 Bootstrap 包括自己的工具提示功能，也是基于popper.js的......所以如果您已经在使用Bootstrap，则不需要再另外使用tooltip.js，只需使用Bootstrap的工具提示功能即可。

请确保包含：

popper.min.js
bootstrap.min.js

按照这个顺序，至于CSS部分，则移除你自己的工具提示CSS，并且只需包含

bootstrap.min.css

在你的页面中。

在代码中，你可以使用与 tooltip.js 相同的所有选项来创建 Bootstrap 工具提示（因为它们都基于 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