javascript - Fullcalendar add tooltip to events - Stack Overflow

admin管理员组

文章数量:1287584

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.

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.

• javascript
• fullcalendar

Share Improve this question Follow asked Aug 21, 2019 at 10:43 johnnymondojohnnymondo 7911 gold badge11 silver badge1010 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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

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

you can use event render function like this:

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

Check out Event render Tooltip Fullcalendar demo

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./popper.js/dist/umd/popper.min.js https://unpkg./tooltip.js/dist/umd/tooltip.min.js

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./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();
}

For anyone using older versions. I had to use V2 of the calendar and the way I did it was to have a div with a tooltip:

<div id="tooltip-span" class="my-tooltip" style="display: none">Hover me</div>

with this css:

.my-tooltip {
        position: absolute;
        z-index: 9999;
        background: #7F8C8D;
        color: white;
        width: 150px;
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
    }

And then just used the eventMouseover and eventMouseout, which can be consulted on:https://fullcalendar.io/docs/v3/eventMouseover In this case from V3 to below And then here are my events:

eventMouseover: function(event, jsEvent, view) {
    var tooltipSpan = document.getElementById('tooltip-span');
    tooltipSpan.innerHTML = event.msg;
    var x = jsEvent.originalEvent.clientX + 10; // Adjust positioning as needed
    var y = jsEvent.originalEvent.clientY + 10; // Adjust positioning as needed
    tooltipSpan.style.top = y + 'px';
    tooltipSpan.style.left = x + 'px';
    tooltipSpan.style.display = 'block'; // Show the tooltip
},
eventMouseout: function(event, jsEvent, view) {
    var tooltipSpan = document.getElementById('tooltip-span');
    tooltipSpan.style.display = 'none'; // hide the tooltip
},

For me it all works fine, and had to make this workaround since I can't upgrade the calendar version.

本文标签： javascriptFullcalendar add tooltip to eventsStack Overflow