Make custom tooltip for FullCalendar.js

I try to make custom tooltip for events in FullCalendar.js but I dont know how can i do that;

this is my code when mouseEnter to event

eventMouseEnter: function(event, jsEvent) {
    var tooltip = `
      <div id="custom-event-tooltip-popup" class="md-tooltip" id="tooltip" style="display: none;direction:rtl;position: absolute">
               <div class="md-tooltip-info"
                    style="height: 121px;background-color: #FFFBF5;position: relative;border-color: #FFFBF5 !important;">
                    <div id="div-color" style="position: absolute;right: 0;width: 4px;height: 90px;border-radius: 8px;"></div>
                         <p id="tooltip-event-time" class="md-tooltip-time"
                            style="font-size: 10px;color: #A3A3A4;display: block;margin-top: 20px;position: absolute;"></p>
                    <div class="d-flex justify-content-between align-items-center">
                         <span id="tooltip-event-name-age" class="md-tooltip-name-age"
                               style="font-size: 12px;color: #757575;margin-top: -30px;"></span>
                                <div id="tooltip-image" style="background-image: url('/indexImages/projectIcon/Rectangle 2564.png');background-repeat: no-repeat;background-position: center;background-size: cover;height: 41px;width: 37px;border-radius: 8px"></div>
                         </div>
                         <div class="md-tooltip-title" style="font-size: 12px;color: #757575;">
                              مدرس دوره: <span id="tooltip-event-title" class="md-tooltip-status md-tooltip-text"></span>
                         </div>
                    <div class="md-tooltip-title" style="font-size: 12px;color: #757575;">نحوه برگزاری: <span id="tooltip-event-reason" class="md-tooltip-reason md-tooltip-text"></span></div>
               </div>
      </div>
    `;
},