I am using Full Calendar HTML module and trying to render all the event details on event hover tooltip. Below is my code:

$(function() { // document ready
  var calendar = $('#calendar');
  var today = new Date();
  
  var bgEvent = {
    id: -1,
    start: null,
    end: null,
    rendering: 'background',
    backgroundColor: 'orange'
  };
  
  calendar.fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay,listWeek'
    },

    eventRender: function(events, element) {
      $(element).tooltip(
     [{title: events.title,
       placement: 'top',
       trigger: 'hover',
       container: 'body'},
       {start: events.start,
        placement: 'top',
        trigger: 'hover',
        container: 'body'},
       {end: events.end,
        placement: 'top',
        trigger: 'hover',
        container: 'body'}]
      );
    },
    eventMouseout: function (event, jsEvent, view) {
      $('#'+event.id).remove();
    },
    defaultDate: today.getFullYear()+"https://stackoverflow.com/"+(today.getMonth()+1)+"https://stackoverflow.com/"+today.getDate(),
    editable: true,
    eventLimit: true, // allow "more" link when too many events
    events:[ 
      {
        title: 'Test Call',
        start: '2022-05-19T13:00:00',
        end: '2022-05-19T14:00:00',
        timezone: 'EST'

      } 
]
    

  });

});

So the tooltip does not render what is under eventRender function. I want to show title, start , end and timezone on over. Not sure what I am missing here. any help pls?