事件工具提示未显示在FullCalendar中

我已经使用FullCalendar配置有一段时间了，但我已经到了一个无法理解的地步。我希望启用当最终用户将鼠标悬停在事件上时显示的工具提示。我想在活动的工具提示中提供一些进一步的信息，例如电话联系号码等

我尝试了许多不同的选择，我能够找到。
例如，下面的链接列表。

我将通过PHP脚本中的JSON数组引入我的事件。 这是我的日历渲染代码

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            height: 550,
            slotDuration: {minutes: 15},
            nowIndicator: true,
            allDaySlot: false,
            eventBackgroundColor: '#916FDF',
            slotMinTime: "08:00:00",
            slotMaxTime: "20:00:00",
            displayEventEnd: false,
            initialView: 'timeGridWeek',
            events: <?php print json_encode($events); ?>,
            eventDidMount: function(info) {
               var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
               });
            },
            customButtons: {
                addNewAppointment: {
                    text: 'New Appt',
                    click: function() {
                        window.location.href="../client/newAppointment.php";
                    }
                }
            },
            headerToolbar: {
                left: 'title',
                center: 'dayGridMonth timeGridWeek',
                right: 'prev next today addNewAppointment'
            }
        });
        calendar.render();
    });

</script>

document.addEventListener（'DOMContentLoaded'，function（）{
var calendarEl=document.getElementById（'calendar'）；
var calendar=新的完整日历。日历（calendarEl{
身高：550，
慢速持续时间：{分钟：15}，
是的，
全天时段：错，
eventBackgroundColor:“#916FDF”，
slotMinTime：“08:00:00”，
slotMaxTime:“20:00:00”，
displayEventEnd:false，
initialView:“timeGridWeek”，
活动：，
eventDidMount:函数（信息）{
变量工具提示=新工具提示（info.el{
标题：info.event.extendedProps.description，
位置：'顶部'，
触发器：“悬停”，
容器：“主体”
});
},
自定义按钮：{
新增任命：{
文本：“新应用程序”，
单击：函数（）{
window.location.href=“../client/newAppointment.php”；
}
}
},
headerToolbar：{
左：'标题'，
中心：'dayGridMonth timeGridWeek'，
右：'prev next today addNewAppointment'
}
});
calendar.render（）；
});

我要拉取事件的PHP如下所示：

<?php
    require_once('../db_connect.php');

    // Check to see if the session is already started. 
    if (session_status() === PHP_SESSION_NONE) {
        session_start();
    }

    $query = 'SELECT
                CONCAT(client.cl_fName, " ", client.cl_lName) AS "title",
                CONCAT(appointment.sched_date,"T", appointment.start_time) AS "start",
                CONCAT(appointment.sched_date,"T", appointment.end_time) AS "end",
                CONCAT("TEST", " DESCRIPTION") AS "description"
                        FROM
                            appointment, client
                        WHERE appointment.client_id = client.client_id';
                
    $statement = $db1->prepare($query);
    $statement->execute();
    $events = $statement->fetchAll();
    $statement->closeCursor();

?>

---

尝试使用popover而不是工具提示，如果您想添加更多信息，它比工具提示更好

将您的
eventDidMount
更改为

eventDidMount: function (info) {
            $(info.el).popover({
                title: info.event.title,
                placement: 'top',
                trigger: 'hover',
                content: 'more info on the popover if you want',
                container: 'body'
            });
        }

谢谢@L4marr，但这也不起作用。我删除了我的JSON提要，看看这是否是由于事件如何填充列表造成的，但仍然不走运。我可以告诉你，至少你的脚本似乎在工作，我将它复制到我的asp.net mvc环境中，工具提示/popover显示正确。您是否正常引用引导？在控制台上没有看到任何JS错误？在我的JS控制台中没有错误。在结束标记之前，我的页面底部有引导JS，CSS链接正确地位于我的部分。在Edge或Chrome中不起作用。我还没有尝试过FireFox，因为我需要做一些CSS黑客来正确显示它。这太奇怪了……当你将鼠标悬停在事件上时，你注意到chrome上的inspect选项卡上出现了任何新的元素吗？