Tooltipster not working properly in the beginning

Question

I am using the tooltipster plugin tool where I got gantt chart drawn with some td given id. So which ever id is defined and the mouse over it will get ajax data and show accordingly.Below is snippet of my codes. Issue here is that the tool tip only appear after few times I mouse the td. Thereafter it works fine. I can see the in my debug window the ajax page is called and also see this error

Tooltipster: one or more tooltips are already attached to this element: ignoring. Use the "multiple" option to attach more tooltips. jquery.tooltipster.min.js:1

  $(document).ready(function () {

      $('td[id]').tooltipster({
    // content: 'Loading...',
     functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();
        var idval=0;
        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data:idval,
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
  });

});

Answer 1

The Tooltipster plugin really should be initialised before all of this. Using the mouseenter enter to trigger it's initialisation every time a user hover's over a <td> element is not great practice and is the root problem to your issue. Ideally you would want to break it down into the following:

1. Find your <td> elements with id's defined.
2. Apply tooltipster to these elements.
3. Let tooltipster handle everything from there.

1. Finding your <td> elements

With the magic of jQuery you can fetch these with a clever use of selectors rather than querying a larger set with your initial implementation, gathered from the answers within the StackOverflow thread here, jquery get only all html elements with ids , we get:

$('td[id]')

This will fetch you all <td> elements with an id defined, be warned this could be a bit slow if you have an extensive table. Alternatively you can select, then apply a filter to narrow down your set:

$('td').filter(function(){
    return $(this).attr('id') !== undefined;
});

Both will essentially do the same!

2. Applying tooltipster to these elements

I've not done much here since you had a lot of commented out code, so I've kept it the same, with some minor tweaks, here is my version of the "working code":

$('td[id]').tooltipster({
    // content: 'Loading...',
   functionBefore: function(origin, continueTooltip) {
        // We'll make this function asynchronous and allow the tooltip to go ahead and show the loading notification while fetching our data
        continueTooltip();

        // Next, we want to check if our data has already been cached
        //if (origin.data('ajax') !== 'cached') {
            $.ajax({
                type: 'GET',
                url: 'getDetails.php',
                data: $(this).attr('id'),
                success: function(data) {
                    // Update our tooltip content with our returned data and cache it
                    //alert("Data is : "+data);
                    var finalData = 'Total Data : 300 <br> Total Completed : 200';

                    //alert("DATA");
                    //origin.tooltipster: $('<span>testst<strong>This text is in bold case !</strong></span>')

                   origin.tooltipster({
                        content: finalData,
                        multiple: true,
                        contentAsHTML: true
                    });

                    //origin.tooltipster({content: data,contentAsHTML: true}).data('ajax', 'cached');
                }
            });
        //}
    }
});

3. Letting tooltipster handle everything from here

Tooltipster (when intialised) is triggered by default when hovering over an element, this means your functionBefore will be run before this "hover" event, causing your AJAX request to be run each time, there is no need to do anything more thereafter :D

I hope this helps! :)

Answer 2

You can use this code :

var tooltipInstance;
$("body").on('mouseover', 'td[id]:not(.tooltipstered)', function(){
    tooltipInstance = $(this).tooltipster({
        //your code ...
    });
    tooltipInstance.tooltipster('open');
});