Javascript 完整日历向事件添加工具提示
我在我的php站点中使用fullcalendar。我用eventSources加载事件,给它一个url重定向到我的php控制器,该控制器生成json数据。在呈现日历之前,我希望每个事件都有工具提示。为此,我编写了一个javascript函数,用于添加工具提示:Javascript 完整日历向事件添加工具提示,javascript,fullcalendar,Javascript,Fullcalendar,我在我的php站点中使用fullcalendar。我用eventSources加载事件,给它一个url重定向到我的php控制器,该控制器生成json数据。在呈现日历之前,我希望每个事件都有工具提示。为此,我编写了一个javascript函数,用于添加工具提示: function dailyTooltip(){ $('.fc-day-grid-event, .fc-time-grid-event').each(function(){ var content = $(this).
function dailyTooltip(){
$('.fc-day-grid-event, .fc-time-grid-event').each(function(){
var content = $(this).data('content');
$(this).attr('title','');
$(this).tooltip({
tooltipClass: 'event-tooltip',
content: content,
});
});
}
其中内容是html内容。该函数在日历渲染后运行。
渲染日历后,工具提示将不显示
为了解决这个问题,我尝试将函数添加到datesRender和eventRender。datesRender似乎可以工作,但只有当我更改视图时(例如,从时间网格更改为dayMonthGrid)。eventRender不起作用。您可以将Tooltip.js与
fullcalendar eventRender一起使用来显示工具提示
<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>
见文件
谢谢您的回答,但我认为问题出在datesRender/eventRender中。我需要执行这两个命令来显示事件中的其他对象,并且它们工作得很好。用于显示工具提示,仅适用于datesRender。我注意到从不同的视图(dayGrid->timeGrid)切换到上一个视图(dayGrid),我可以看到工具提示。
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,//you can give data for tooltip
placement: 'top',
trigger: 'hover',
container: 'body'
});
},