The event tooltip in fullcalendar does not show up as expected

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?

Answer №1

It was a sound decision in my situation:

eventRender: function (eventInfo) {

    $(eventInfo.el).tooltip({                
        title: "<i class=\"fa fa-users\"></i>&nbsp;<b>"+eventInfo.event.extendedProps.attendees_count+"&nbsp;attendee(s)</b>" +
            " <br><smalUUl>"+eventInfo.event.extendedProps.description+"</smalUUl>",
        html: true,
    });

},

Both the description and attendees_count are custom fields I included with the event, without using any additional libraries.

Answer №2

executeOnViewRender: function(view){
   $('.has-tooltip').initializeTooltip({target:'#calendar',position:'top'});
},

Utilize the executeOnViewRender function to display tooltips.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to convert minutes into both hours and seconds using javascript?

In order to achieve this functionality, I am trying to implement a pop-up text box where the user can choose either h for hours or s for seconds. Once they make their selection, another pop-up will display the answer. However, I am facing issues with gett ...

Enabling sidebar functionality for every component in React JS using React Router v6

I am currently using react router dom v6 and encountering an issue where the sidebar disappears whenever I click on any component in the app. I need to find a way to keep the sidebar visible across all components. Sidebar Available Sidebar Gone Index.js ...

ajax is now blocking the use of Window.location

I am facing an issue with window.location while working on an ajax request. Here is the code snippet for my ajax request: function login(){ var u = document.getElementById("username").value; var p = document.getElementById("password").value; ...

How can we compress videos on an Android device prior to uploading them through a web browser?

Can video compression be done prior to uploading via a web browser? For example, in iOS devices you can choose a video using the HTML input type file tag and iOS will automatically compress it before uploading. Are there any JavaScript or jQuery libraries ...

Issue: Request from a different origin blocked

I encountered an issue while working on a web project using the PlanGrid API. I am receiving a cross-domain request block error. var apiKey="API KEY"; var password="PASSWORD"; $.ajax({ url: "https://io.plangrid.com/projects", xhrFields: { ...

Is it possible to update labels on an AngularJS slider using a timeout function?

I recently started implementing an AngularJS slider to navigate through various date and time points. Specifically, I am utilizing the draggable range feature demonstrated in this example - https://jsfiddle.net/ValentinH/954eve2L/ The backend provides the ...

Troubleshooting PHP webpage with dysfunctional Python AJAX functionality

I have been working on developing a website that integrates with a python script to control GPIO pins on my Raspberry Pi. Unfortunately, I've encountered some issues with the code and need some assistance in troubleshooting. Could someone please revi ...

Using the attribute to pass an object to a directive and including a variable inside

Is it possible to transfer $scope.data to a directive through its attribute in an Object, without using separate attributes? I would like to achieve the below format with any solution. <custom-directive detail="{index:1, data: {{data}}}"> </custo ...

Storing approximately 1 kilobyte of information throughout various pages

Is it feasible to store approximately 1kb of data while transitioning between two pages on the same domain using Javascript, Jquery (1.7), and Ajax? For instance, a user inputs data into a textbox on one page and then moves to another specific page. Can ...

Incorporating additional value attributes without replacing the existing ones

Is there a way to add a value attribute through jQuery without removing the old attribute, similar to how addClass works? I have 7 input fields that are being typed in, and I need to combine them into one word and pass it to another input field. When I try ...

Arrays in Javascript (correlating)

I'm having trouble figuring out what needs to be included in this code (I apologize that it's in German, it's an array corresponding to images for JavaScript.) function namenZuBildern(){ var bilder = new Array( "000227", "000228", " ...

What is the best way to redirect nodejs requests to a separate nodejs application?

Hello! I am currently working on a project to create an API gateway using Node.js and Express. The goal is to showcase a small-scale microservices architecture by routing requests to different microservices. For instance, if I have microservices A, B, and ...

Error occurred while attempting to execute the method

Here's a MongoDB Mongoose query we're dealing with: sampleSchema.find({ $where: "expired <= " + (new Date()) }) .limit(9) // Problems may arise from here .sort({ postedDate: -1 }) .then((docs) => { console.log(&apos ...

When attempting to establish a socket connection to a node server from an HTTPS protocol, a mixed

I have recently enhanced my website by adding a nodejs+socket.io based conversation server to it. This server is hosted on a separate AWS instance while the main website runs on HTTPS. However, I encountered an issue when trying to establish a socket conn ...

Is the removal of the Vue-Router link happening when you click on the top app bar icon in Google Material

Review of the following code snippet: <!DOCTYPE html> <html> <head> <title>test</title> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='vie ...

Creating a flexible Bootstrap 3 layout that responds to the size of a div, not just the screen

Having a web page layout with a main content area and a fixed-width sidebar is proving to be a challenge. I want the content displayed in both sections to be responsive, adjusting based on the size of their respective parent divs rather than the screen siz ...

Is the contenteditable feature working properly when updating PHP, SQL, and AJAX in the network?

Struggling with updating modified text to SQL using PHP and Ajax. Unsure if the issue lies in the data sent through Ajax or a problem within the PHP script. Below is my snippet from the HTML file: <tr> <td class="editingTab" contenteditable=&ap ...

Having difficulty retrieving a dropdown value with reactjs

Seeking assistance with retrieving dropdown values in ReactJS. Despite attempting multiple methods, I have been unsuccessful in obtaining the values. Can someone provide guidance on extracting these values? Below is a snippet of my code: <Grid container ...

Creating an AngularJS service or factory that dynamically compiles HTML using a variable from the $scope

Looking to streamline a commonly used function in various controllers within an AngularJS project by creating a service/factory that can be accessed through $rootScope. The objective is to refactor the existing function: $scope.twitterRefresh = function(o ...

Guide on shifting an element into a different one with the help of jQuery

I'm attempting to relocate an element within another in order to enable a css :hover effect. <ul> <li id="menu-item"> //move into here </li> </ul> <div class="tomove">...</div> 'tomove' is set to dis ...