在 JS 中使用 fullcalendar 添加鼠标悬停/输入事件时包含事件详细信息的弹出窗口

,我已经挣扎了一段时间了,现在尝试各种可能的方法使用全日历在鼠标悬停时添加弹出窗口,所有解决方案要么消除我的日历,要么不起作用。我试图在鼠标悬停的任何事件上方添加一个弹出窗口。请帮忙 :(


这是我的代码(添加了一个带有有效事件标题的警报):


<!DOCTYPE html>

<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>




<script src="../Scripts/ajaxCalls.js"></script>



<link href="../Style/jquery.dataTables.min.css" rel="stylesheet" />

<link href="../Style/StyleSheet.css" rel="stylesheet" />

<!-- Latest compiled and minified CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">


<!-- jQuery library -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<!-- Latest compiled JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>



<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>



<meta charset="utf-8" />

<title>Schieffer - Home</title>



MMTTMM
浏览 83回答 1
1回答

莫回无

于您似乎使用的是 bootstrap 3,因此您不需要 popper.js 或 tooltip.js,或任何关联的 CSS。只需使用 bootstrap 的内置工具提示功能:https://getbootstrap.com/docs/3.4/javascript/#tooltips。您可以在回调期间将工具提示附加到 fullCalendar 事件eventRender。我希望这样的事情应该有效:eventRender: function(info) {   $(info.el).tooltip({ title: info.event.title }); }注意:要获得更复杂的布局,或者在显示的内容中添加更多信息,您也可以考虑使用弹出框。设置几乎相同。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5