Fullcalendar 向事件添加工具提示

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 (eg from timeGrid to dayMonthGrid). eventRender doesn't work.

Answer 1

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

Answer 2

In fullcalendar.js V5, there is no eventRender. So what I did is everytime I click any button on the calendar header i create their tooltip

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


const calendarControlBtns = Array.from(
  document.querySelectorAll('.fc-header-toolbar button')
);
calendarControlBtns.forEach((singleControlBtn) => {
  singleControlBtn.addEventListener('click', handleNewInterval);
});
const handleNewInterval = (e) => {
  const allEvents = Array.from(document.querySelectorAll('.fc-timegrid-event'));
  allEvents.forEach((singleEvent) => {
    singleEvent.dataset.toggle = 'tooltip';
    const title = singleEvent.querySelector('.fc-event-title').innerHTML;
    singleEvent.dataset.title = title;
  });
  $('[data-toggle="tooltip"]').tooltip();
}

Answer 3

I know this is an old post but if someone finds this post. FullCalendar v5 has a hover example. https://fullcalendar.io/docs/event-tooltip-demo

You can also view it in code pen(top right hand corner button)

Make sure to add the two js scripts. https://unpkg.com/popper.js/dist/umd/popper.min.js https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js