javascript - fullCalendar V3 Tool tip doesnt show on hover

Question

Does Fullcalendar V3 or V5 support Tool tip by default? in the docs they we should use eventrender does that mean eventrender needs to be used with external libraries to get the Tooltip? does fullcalendar provide any event/Api to get the Tooltip? or do we need to use Bootstrap or Jquery to get Tool tip functionality?

below is my js code, when i hover on my event it doesnt show any tool tip and there are no errors in console.

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>

question from:https://stackoverflow.com/questions/65935363/fullcalendar-v3-tool-tip-doesnt-show-on-hover

Answer 1

Waitting for answers