fullCalendar V3 工具提示在悬停时不显示

Question

Fullcalendar V3 或 V5 是否默认支持工具提示？在文档中，我们应该使用 eventrender，这是否意味着 eventrender 需要与外部库一起使用才能获取工具提示？ fullcalendar 是否提供任何事件/Api 来获取工具提示？ 或者我们是否需要使用 Bootstrap 或 Jquery 来获取工具提示功能？

下面是我的 js 代码，当我将鼠标悬停在我的事件上时，它不会显示任何工具提示，并且控制台中也没有错误。

JET

function renderData($,self,data)  {

    self = this;
    this.events = [];
      data.forEach(element => {
    const obj ={};
    const extendedProps ={};
        var teststr1 = (element.TABLEX_LITM.value).concat(" - ",(element.TABLEX_DOCO.value));
        var teststr2 = (element.TABLEX_DL01.value).concat(" - ",teststr1);
        obj.title = teststr2,
        obj.start = new Date(element.TABLEX_DRQJ.value),
        obj.end= new Date(element.TABLEX_STRT.value),
        extendedProps.QuantityOrdered = element.TABLEX_UORG.value,
        extendedProps.QuantityCompleted = element.TABLEX_SOQS.value,
        obj.extendedProps = extendedProps,
        events.push(obj); 
});   

  
    this.calendar = $ ('#calendar').fullCalendar(
    {
    editable: true,
    weekends : false,
    selectable: true,
    selectHelper:true,
    timeFormat: 'H(:mm)',
    displayEventTime: false,
    header:{
        left : 'prev,next,today',
        center : 'title',
        right : 'month,agendaWeek,agendaDay'
    },  
    
    events: events,
   
    
    eventRender: function (events, element) {
     
        element.attr('href', 'javascript:void(0);');
        element.click(function() {
           
            $("#startTime").html(formatDate(events.start));
            $("#endTime").html(formatDate(events.end));
            $("#QuantityOrdered").html(events.extendedProps.QuantityOrdered);   
            $("#QuantityCompleted").html(events.extendedProps.QuantityCompleted); 
            $("#eventContent").dialog({ modal: true, title: events.title, width:350});
           
        });
        
          var tooltip = new Tooltip(eventInfo.el, {        
                // title: eventInfo.event.extendedProps.description,
                title: eventInfo.events.extendedProps.description,
                placement: 'top',
                trigger: 'hover',
                container: 'body'
            });
        
    },
}); 

  $('#calendar').fullCalendar({  
    eventAfterRender: function(event, element) {
        $(element).tooltip({
            title: event.title,
            container: "body"
        });
    }
});

}
 
    $(document).ready(function() {
        var chartModel = new ChartModel();
        getE1Data(chartModel,(status)=>{
            ko.applyBindings(chartModel, document.getElementById('calendar'));
        });
    }); 
 });

JET

  <div class = "container">
    <div id = "calendar"> 
    <oj-table id='table' aria-label='Departments Table'
        data='[[dataprovider]]'
        columns='[[columns]]'
        style='width: 100%; height: 700px;'>   
    </oj-table>
    </div>
    
 <div id="eventContent" title="Event Details" style="display:none;">
    Start Date: <span id="startTime"></span><br>
    Requested Date: <span id="endTime"></span><br>
    Quantity Ordered: <span id="QuantityOrdered"></span><br>
    Quantity Completed: <span id="QuantityCompleted"></span><br><br>
</div>