Question

我正在开发一个私人Codeigniter项目，并希望在fullcalendar的帮助下在我的视图中显示一些事件。

到目前为止-很好。但是我想显示比事件名称和时间更多的信息，我想显示诸如房间和讲师之类的附加信息。 fullcanender文档推荐此解决方案：event-tooltip-demo。但这仅在我不使用引导程序的情况下有效。当我集成bootstrap.css时，工具提示将不会显示。添加Bootstrap时，甚至Codepen上的官方示例也具有相同的行为。有任何想法吗？提前非常感谢您！

编辑：顺便说一下，这里有一些其他信息可能会有所帮助。当我在包含bootstrap.css的情况下悬停事件时，以下元素会显示在检查器中：

<div class="tooltip" role="tooltip" id="tooltip_zvh8nhyqlo" aria-hidden="false" x-placement="top" style="position: absolute; will-change: transform; visibility: visible; top: 0px; left: 0px; transform: translate3d(488px, 179px, 0px);"><div class="tooltip-arrow" style="left: 65px;"></div><div class="tooltip-inner">Lecture</div></div>

所以这似乎是故意的。

这是我的“进口商品”的订单：

        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.css">
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.3.0/locales-all.min.js"></script>
    <script src='https://unpkg.com/popper.js/dist/umd/popper.min.js'></script>
    <script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>

一旦我取消注释第一行（bootstrap.css），就会显示工具提示。官方Codepen示例中的行为相同。不管我使用Bootstrap 4还是3

Answer 1

出现问题的原因是工具提示与引导CSS冲突。您只需添加两个简单的CSS即可轻松解决冲突。

您需要在opacity: 1;类上添加tooltip，在background-color: transparent;类上添加tooltip-inner，以获得与添加引导程序之前相同的结果。

以下是Codepen中的这些更新： https://codepen.io/sasiddiqui/pen/oNxzBMe

Fullcalendar中的工具提示不会与引导程序一起显示

1 个答案: