+ Start a Discussion
louisa barrett 7louisa barrett 7 

Full Calendar V4 and tooltips

Hi,

Has anyone had any joy in using tooltips (popper and tooltip.js) with the Full Calendar Scheduler V4 resource timeline view?
I have created a very simple cut down version to demonstrate the issue I'm having. The tooltip is being created but it isn't being displayed. If I create the project in codepen using the exact same files as are in my static resources it works as intended.
 
Component
<aura:component implements="force:appHostable" access="global">
   <ltng:require scripts="{!join(',',
                           $Resource.FullCalendarCoreMainV4_3_1JS,
                           $Resource.FullCalendarInteractionV4_3_1JS,
                           $Resource.FullCalendarDayGridMainV4_3_1JS,
                           $Resource.FullCalendarTimelineMainV4_3_1JS,
                           $Resource.FullCalendarTimegridMainV4_3_1JS,
                           $Resource.FullCalendarResourceCommonMainV4_3_1JS,
                           $Resource.FullCalendarResourceTimelineMainV4_3_1JS,
                           $Resource.FullCalendarResourceDayGridMainV4_3_1JS,
                           $Resource.FullCalendarResourceTimegridMainV4_3_1JS,
                           $Resource.PopperMin, 
                           $Resource.TooltipMin
                           )}"
                 styles="{!join(',',
                          $Resource.FullCalendarCoreMainV4_3_1CSS,
                          $Resource.FullCalendarDayGridMainV4_3_1CSS,
                          $Resource.FullCalendarTimelineMainV4_3_1CSS,
                          $Resource.FullCalendarResourceTimelineMainV4_3_1CSS)}"  
                  afterScriptsLoaded="{!c.scriptsLoaded}"
                  />    
    <!-- COMPONENT UI -->  
        <div id="calendar"/> 
</aura:component>

Controller:
 
({ 
    scriptsLoaded : function(component, event, helper) {
        console.log('Calendar scripts loaded'); 
        var calendarElement = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarElement,{
            plugins:['resourceTimeline', 'dayGrid'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'timelineFiveDays, resourceTimelineDay, dayGridMonth'
            },
            defaultView: 'timelineFiveDays',
            views: {            
                timelineFiveDays:{
                    type: 'resourceTimeline',
                    duration: { weeks: 1 },
                    slotDuration: {days: 1},
                    weekends: false,
                    buttonText: '5 Days'
                },
            },
            resources:[
                {
                    id:'a',
                    title:'Person A'
                },
                {
                    id:'b',
                    title:'Person B'
                }
            ],
            events: [
                {
                    title: 'Event 1',
                    description: 'Description for Event 1',
                    start: '2020-04-27',
                    resourceId: 'a'
                },
                {
                    title: 'Event 2',
                    description: 'Description for Event 2',
                    start: '2020-04-28',
                    resourceId: 'a'
                },
                {
                    title: 'Event 3',
                    description: 'Description for Event 3',
                    start: '2020-04-29',
                    resourceId: 'a'
                }
            ],
            eventRender: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
                console.log(tooltip);
            },
        });
        calendar.render();
    },
})

Style:
I have also tried removing everything from the style class with the same result
.THIS .popper .tooltip {
  position: absolute;
  z-index: 9999;
  background: #FFC107;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 10px;
  text-align: center;
}
.THIS .style5 .tooltip {
  background: #1E252B;
  color: #FFFFFF;
  max-width: 200px;
  width: auto;
  font-size: .8rem;
  padding: .5em 1em;
}
.THIS .popper .popper__arrow .tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.THIS .tooltip .tooltip-arrow .popper .popper__arrow {
  border-color: #FFC107;
}
.THIS .style5 .tooltip .tooltip-arrow {
  border-color: #1E252B;
}
.THIS .popper[x-placement^="top"] .tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}
.THIS .popper[x-placement^="top"] .popper__arrow .tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.THIS .popper[x-placement^="bottom"] .tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}
.THIS .tooltip[x-placement^="bottom"] .tooltip-arrow .popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.THIS .tooltip[x-placement^="right"] .popper[x-placement^="right"] {
  margin-left: 5px;
}
.THIS .popper[x-placement^="right"] .popper__arrow .tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.THIS .popper[x-placement^="left"] .tooltip[x-placement^="left"] {
  margin-right: 5px;
}
.THIS .popper[x-placement^="left"] .popper__arrow .tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
Browser Console
Browser Console Debugging​​​​​​​From the browser console you can see the tooltip is being created, but it isn't being displayed. As this is working in codepen I'm assuming Salesforce is blocking something, but I'm not really too sure where to start

Any help would be much appreciated
AbhishekAbhishek (Salesforce Developers) 
Hi Louisa,

Maybe the below suggestions might help you.

https://stackoverflow.com/questions/61454256/salesforce-full-calendar-tooltip-being-created-but-not-displaying

https://fullcalendar.io/docs/event-tooltip-demo

https://stackoverflow.com/questions/tagged/fullcalendar-scheduler


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.


Thanks.