Fullcalendar add tooltip to events

Question

I'm using fullcalendar in my php site. I load events with eventSources, giving it an url redirecting to my php controller, which generates json data. Before the calendar is rendered, I wish every event has a tooltip. To this scope I wrote a javascript function that add the tooltip:

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

where content is html content. The function runs after calendar rendering. After the calendar has been rendered, the tooltip is not showing.

To resolve this problem, I tried to add the function to datesRender, and eventRender. datesRender seems to work, but only when I change view (e.g. from timeGrid to dayMonthGrid). eventRender doesn't work.

ArunPratap ArunPratap · Accepted Answer · 2019-08-21T10:50:13

you can use Tooltip.js with fullcalendar eventRender for showing tooltips,

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

you can use event render function like this as its suggested in official docs

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

See docs Event render Tooltip Fullcalendar

Fullcalendar add tooltip to events

1 Answers