如何解决Fullcalendar中的工具提示不会与引导程序一起显示
我正在开发一个私人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
解决方法
出现问题的原因是工具提示与引导CSS冲突。您只需添加两个简单的CSS即可轻松解决冲突。
您需要在opacity: 1;
类上添加tooltip
,在background-color: transparent;
类上添加tooltip-inner
,以获得与添加引导程序之前相同的结果。
以下是Codepen中的这些更新: https://codepen.io/sasiddiqui/pen/oNxzBMe
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。