You need to sign in to do that
Don't have an account?
louisa 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
Controller:
Style:
I have also tried removing everything from the style class with the same result
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
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
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
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.