2

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, in my debug window, that ajax page is called and following 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');
                }
            });
        //}
    }
  });

});
maciejwww
  • 1,067
  • 1
  • 13
  • 26
user2711681
  • 285
  • 7
  • 16

2 Answers2

4

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! :)

Community
  • 1
  • 1
zesda
  • 418
  • 6
  • 18
  • I need some clarification how to "initialised before all of this."? What should I do for this? Where to call this $('td').filter(function(){ return $(this).attr('id') !== undefined; }); – user2711681 Jun 12 '14 at 13:26
  • @user2711681 Place the code above within a document ready block, e.g. `$(document).ready(function(){ /** the code goes here **/ });` – zesda Jun 12 '14 at 13:35
  • Yes I have done how about this $('td').filter(function(){ return $(this).attr('id') !== undefined; }); and how to capture the id to be set into my idval variable? I still see its lagging where it need two or three times. I have updates my question with my latest codes. – user2711681 Jun 12 '14 at 13:36
  • @user2711681 That's just an alternative to `$('td[id]')`, you won't need to use it if you're happy with that. You can always set your `idval` using `$(this).attr('id')`, I've updated my answer to reflect this :) – zesda Jun 12 '14 at 13:48
  • Ok great it work but I still need at minimum 2 time mouse over then only the tool tip appear. But from the debug log I can see my ajax page is called when I mouse over. Any solution to this? – user2711681 Jun 12 '14 at 14:05
  • @user2711681 Is this a large table with lots of `` elements? – zesda Jun 12 '14 at 14:31
  • It is not so many presently. But how to over come this issue any idea please ? – user2711681 Jun 12 '14 at 15:13
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55522/discussion-between-zesda-and-user2711681). – zesda Jun 12 '14 at 16:29
  • hope you are back so any help on how to optimise on my problem? – user2711681 Jun 15 '14 at 17:41
0

You can use this code : 

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