FullCalendar EventRender Issue - fullcalendar

Question

I'm trying to get popovers to display the event information using FulCalendar 3.9.0 JQuery 3.3.1 and Bootstrap 4.1.0. When I try replacing the following code:
eventClick: function(event) {
// opens events in a popup window
window.open(event.url, '_blank', 'width=700,height=600');
return false;
}
as demonstrated by this online demo with:
eventRender: function(eventObj, $el) {
$el.popover({
title: eventObj.title,
content: eventObj.description,
trigger: 'hover',
placement: 'top',
container: 'body'
});
},
The following code displays the events drawn from various Google Calendars without any issue before that change is made:
$(document).ready(function() {
// Initialise the main calendar instance
$('#fullcalendar-instance').fullCalendar({
googleCalendarApiKey: 'MyAPIkey',
eventSources: [
{
googleCalendarId: 'gCalID-1',
color: 'green', // an option!
textColor: 'black', // an option!
className: 'my-event-1'
},
{
googleCalendarId: 'gCalID-2',
color: 'blue', // an option!
textColor: 'black', // an option!
className: 'my-event-2'
},
{
googleCalendarId: 'gCalID-3',
color: 'orange', // an option!
textColor: 'black', // an option!
className: 'my-event-3'
}
],
header: {
left: 'prev,next today',
center: 'title',
right: 'prevYear,nextYear',
},
titleFormat: 'MMM YYYY',
dayNamesShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
bootstrapFontAwesome: {
close: 'fa-times',
prev: 'fa-angle-left',
next: 'fa-angle-right',
prevYear: 'fa-angle-double-left',
nextYear: 'fa-angle-double-right'
},
timezone: 'Europe/London',
defaultView: 'month',
themeSystem: 'bootstrap4'
})
});
No errors are displayed in the console as far as I can see.
It is just that all the calendar events fail to be displayed.
Any assistance would be appreciated.