Here is a snip of my code. Plain user-calender.js file. On Ajax call I am initiating fullCalendar

let calendarElement;
window.ZC_Calendar = {
  calendarElement: undefined,
  init: function () {
    this.calendarElement = new FullCalendar.Calendar(
      document.getElementById('userCalender'),
      {
        timezone: 'local',
        customButtons: {
            occupied: {
            text: 'Occupied',
            },
            onLeave: {
            text: 'On leave',
            },
            available: {
            text: 'Available',
            },
        },
        headerToolbar: {
            right: 'prev,next dayGridMonth,timeGridWeek,timeGridDay',
            center: 'title',
            left: 'available occupied onLeave',
        },
        firstDay: 1,
        allDaySlot: true,
        navLinks: true,
        dayMaxEvents: true,
        displayEventEnd: true,
        displayEventTime: true,
      }
    );
    this.calendarElement.render();
  },
};

Now initiating the calendar on some action:

.on('change', '#teamMembers', function (e) {
   if ($(this).val() > 0) {
       ZC_Calendar.init();
      self.userAvailabilityCalender(this);
   }
})

Here is final ajax call, which fetch the data from and load on calendar. Here after the addEvent I want to show the tooltip of description portion

userAvailabilityCalender: function (input) {
        ZC_Calendar.calendarElement.removeAllEvents();
        $.ajax({
            url: Routing.generate('get_user_calender', {userId: $(input).val()}),
            type: 'GET',
            success: function (response) {
                for (let i = 0; i < response['events'].length; i++) {
                    ZC_Calendar.calendarElement.addEvent(response['events'][i]);
                }
            }
        });
    },

Final output of calendar: