Question

我在我的php网站中使用fullcalendar。我用eventSources加载事件，为它提供一个重定向到我的PHP控制器的URL，该控制器生成json数据。在呈现日历之前，我希望每个事件都有工具提示。为此，我编写了一个javascript函数，添加了工具提示：

 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,
      }); 
   });
 }

其中content是html内容。该功能在日历渲染后运行。呈现日历后，工具提示不显示。

为解决此问题，我尝试将函数添加到dateRender和eventRender。 dateRender似乎有效，但是仅当我更改视图时（例如，从timeGrid更改为dayMonthGrid）。 eventRender不起作用。

Answer 1

您可以将Tooltip.js与fullcalendar eventRender一起使用以显示工具提示，

<script src='https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js'></script>

您可以按照官方文档中的建议使用此类事件呈现功能

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'
        });
      },

请参阅文档Event render Tooltip Fullcalendar

Fullcalendar向事件添加工具提示

1 个答案: