Fullcalendar v5 only renders one event tip

Question

I´m trying to render some events in v5 fullcalendar. This is my code:

document.addEventListener('DOMContentLoaded',function(){
            var cUI= document.getElementById('calendar'); 
            var c= new FullCalendar.Calendar(cUI,{
                themeSystem: 'bootstrap',
                headerToolbar:{
                    left:'prev,next today',
                    center:'title',
                    right:'',
                },
                events:[
                    {% for v in vacation %}
                        {
                            {% if v.id_cause.cause_name == 'Vacations' %}
                               backgroundColor : 'blue',
                               borderColor : 'blue',
                            {% else %}
                                backgroundColor : 'darkgreen',
                                borderColor : 'darkgreen',
                            {% endif %}
                            textColor : 'gray',
                            title:"{{ v.startT }} - {{ v.endT }}",
                            start: "{{ v.startD | date:'Y-m-d' }}",
                            end: "{{ v.endD | date:'Y-m-d' }}",
                            description:"{{v.id_cause.cause_name}} {{v.cause_text}}",
                        },
                    {% endfor %}                    
                ],
                {% comment %} eventDidMount: function(info) {
                    var tooltip = tippy('.fc-event-title-container',{
                        content: info.event.extendedProps.description,
                        placement: 'top',
                        interactive: true,
                    });
                }, {% endcomment %}
            });
            c.render();
            c.setOption('locale','en');
        });

---UPDATED---

document.addEventListener('DOMContentLoaded',function(){
            var cUI= document.getElementById('calendar'); 
            var c= new FullCalendar.Calendar(cUI,{
                themeSystem: 'bootstrap',
                headerToolbar:{
                    left:'prev,next today',
                    center:'title',
                    right:'',
                },
                events:[
                    {backgroundColor : 'blue',
                    borderColor : 'blue',
                    textColor : 'gray',
                    title:"08:00-09:00",
                    start: "2021-10-13",
                    end: "2021-10-20",
                    description:"vacation- holy time"},
                    {backgroundColor : 'green',
                    borderColor : 'green',
                    textColor : 'gray',
                    title:"08:00-10:00",
                    start: "2021-10-15",
                    end: "2021-10-15",
                    description:"medical- future´s coming"},
                   
                ],
                eventDidMount: function(info) {
                    var tooltip = tippy('.fc-event-title-container',{
                        content: info.event.extendedProps.description,
                        placement: 'top',
                        interactive: true,
                    });
                },
            });
            c.render();
            c.setOption('locale','en');
        });

---UPDATED--- It renders the calendar and tips, however it repeats the same tip for all events, but colors for different cause_names shows different, so I don´t get the point it renders all events with their data correctly but tips fails. I´m on django 3 btw. Maybe rollback to previous fullcalendar version with eventRender, instead eventDidMount? Thanks for the help

Answer 1

By providing the class selector .fc-event-title-container to tippy, you're attaching each tooltip to all the events (because they all have that class). So in the end, every tooltip is attached to every event.

They then overlap when displayed, and sometimes you can see bits of the text for different ones, and sometimes just the most recent one, depending on exactly how they get rendered by tippy.

You need to specify just the specific event element you want that tooltip to be attached to. Since tippy will accept an element object (instead of a selector string) as input, this is straightforward because the eventDidMount callback arguments provide you with the correct element object directly.

It makes sense to do it that way rather than using a selector, because the fullCalendar HTML event elements don't have individual unique IDs in the markup.

Code:

eventDidMount: function (info) {
  var tooltip = tippy(info.el, {
    content: info.event.extendedProps.description,
    placement: "top",
    interactive: true
  });
}

Working demo: https://codepen.io/ADyson82/pen/yLoPjqX