Within my Laravel 5.8 / Bootstrap v4.1.2 / jQuery jQuery v3.3.1 fullcalendar v4.3.1 application, I am attempting to incorporate tooltips for events in the fullcalendar plugin. To achieve this, I referred to a specific example provided here: Sample Example
Here is how I implemented it:
eventRender: function (eventInfo) {
console.log("eventInfo")
console.log(eventInfo)
console.log("eventInfo.el")
console.log(eventInfo.el)
var tooltip = new Tooltip(eventInfo.el, {
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor',
placement: 'top',
trigger: 'hover',
container: 'body'
});
eventInfo.el.querySelector('.fc-title').innerHTML += "<i class='fa fa-external-link pull-right'" +
" onclick=\"javascript:backendEvent.editCalendarEvent(event," + eventInfo.event.id + "); return" +
" false;\">Edit</i>";
return;
Despite no errors being reported in the console, the tooltip text does not display.
The console shows eventInfo.el as: Element Screenshot, indicating they are valid elements.
In my resources/views/admin/event/index.blade.php file, I have included the following scripts:
<script src="{{ asset('js/fullcalendar/core/main.js') }}"></script>
<!-- FullCalendar Core Package v4.3.1 -->
<script src="{{ asset('js/fullcalendar/daygrid/main.js') }}"></script>
<!-- FullCalendar Day Grid Plugin v4.3.0 -->
<script src="{{ asset('js/popper.min.js') }}"></script>
<!-- Copyright (C) Federico Zivolo 2019 -->
<script src="{{ asset('js/tooltip.min.js') }}"></script>
<!-- Copyright (C) Federico Zivolo 2019 -->
In reviewing the example, I noticed that the tooltip variable was declared but never used. Is this acceptable?
How can I resolve this issue?
MODIFIED BLOCK:
All JavaScript functionality resides in public/js/defaultBS41Backend/admin/event.js, loaded after fullcalendar files: JavaScript Loading Order
FullCalendar initialization occurs within JavaScript functions:
// Function responsible for loading events with FullCalendar
backendEvent.prototype.evenstLoadWithFullCalendar = function () {
// Data array configuration
}
function initFullCalendar(eventsList) {
// Clear existing calendar instance
// Create new FullCalendar object with configurations
}
// Potential tooltip reinitialization after AJAX data load
jQuery('.eo-fullcalendar').on('click', '.fc-event', function (e) {
e.preventDefault();
});
Given that data retrieval via AJAX may impact certain jQuery components, could it be necessary to reinitialize the tooltip after loading new data asynchronously?