2

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 :)

Matthieu
  • 151
  • 1
  • 9
  • Did you include some CSS for the tooltip as well? It doesn't have any by default. – ADyson Sep 22 '21 at 14:29
  • 1
    Of course, i used the css from this sample https://fullcalendar.io/docs/event-tooltip-demo – Matthieu Sep 23 '21 at 08:37
  • ok. Any errors in the browser's console when you try to do the hover (or before that)? – ADyson Sep 23 '21 at 08:48
  • Also...I'm not sure but just to rule something out, can you comment out the `eventContent` option and then see if the popover starts working. – ADyson Sep 23 '21 at 08:49
  • I just tried to put in comment the eventContent but nothing change, the tooltip still does not appear and I don't have any error in the browser – Matthieu Sep 23 '21 at 09:07
  • Ok, so, I don't know Angular but I made a demo using vanilla JS, using the same calendar settings you used above. It works - see https://codepen.io/ADyson82/pen/jOwpoNm?editors=0110 . The only differences are: I used fullCalendar's standard event list URL because I can't see your events...and because of that I changed the tooltip to show the event title instead of description (because that feed doesn't have descriptions on the events). Can you try using `info.event.title` instead and see if it makes any difference? Because when I first tried mine using the description the tooltip didn't appear – ADyson Sep 23 '21 at 09:24
  • 1
    Thanks for your Help, It seems its an fullcalendar/tooltip library angular problem because all works fine with Vanilla JS. I just changed Tooltip by Tippy and all works fine now. – Matthieu Sep 23 '21 at 14:25

0 Answers0