Tooltip not working with FullCalendar v5 In angular

Viewed 871

I'm trying to update Fullcalendar in v5 in my angular app. I try to display a tooltip when the mouse is over an event. I have imported the library Tooltip and Popper as mentionned in the Fullcalendar docs but nothing appears when i'm over an event.

this.calendarOptions = {
            timeZone: 'UTC',
            initialView: 'resourceTimelineDay',
            aspectRatio: 1.5,
            resourceAreaWidth: '200px',
            slotMinWidth: 300,
            contentHeight: 1000,
            height: 1000,
            headerToolbar: {
                left: 'prev,next',
                center: 'title',
                right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth'
            },
            editable: true,
            resourceAreaHeaderContent: 'Rooms',
            resources: this._resources,
            events: evts,
            eventContent: function(arg) {
                let divEl = document.createElement('div');
                let htmlTitle = arg.event._def.extendedProps['html'];
                if (arg.event.extendedProps.isHTML) {
                    divEl.innerHTML = htmlTitle;
                } else {
                    divEl.innerHTML = arg.event.title + '<br><span style="color: #0a0a0a">' + arg.event.title + '</span>';
                }
                let arrayOfDomNodes = [divEl];
                return { domNodes: arrayOfDomNodes };
            },
            eventDidMount: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            }
}

Someone know what is the problem ? What ma i doing wrong ?

Thanks :)

0 Answers
Related