CODEWITHSUNDEEP
jqueryajaxmouseovertooltipster
user3011293
user3011293

Reputation: 11

tooltipster not showing on first mouseover

I'm trying to figure out the best way to trigger a dynamic tooltip with the tooltipster plugin. Basically I have a script that loops out a bunch of elements with IDs. I get the ID via jquery from the .hover event and pass that into the tooltipster widget which runs an ajax call, pulling the appropriate data for that ID. Everything works fine except for the first .hover event because there is no tooltipster widget associated with the element initially.

What I believe I need (I'm just not sure how to go about it) is a solid method to check if there is a tooltipster widget associated with an element and if not, trigger a mouseover/hover WITHIN my existing script.

Here's the idea:

if(!$(this).tooltipster()){$(this).trigger('mouseover');}

Here's the function:

$(document).ready(function() {
                    $('.tooltip').hover(function(){
            var content = $(this).attr("id");

            if(!$(this).tooltipster()){$(this).trigger('mouseover');}

        $(this).tooltipster({
                animation: 'fade',
               delay: 0,
               speed: 250,
               theme: '.newtooltip',
                content: '<img src="images/ajaxcircle.gif" width="16" height="16" />',

            functionBefore: function (origin, continueTooltip) {

            continueTooltip();

            if (origin.data('ajax') !== 'cached') {
                $.ajax({
                    type: 'GET',
                    url: 'datagrab.html',
                    data: { ID: content},
                    success: function (data) {
                    origin.tooltipster('update', data).data('ajax ', 'cached');
                }
              });
            }
           }
         });
        });

    });

Upvotes: 1

Views: 2258

Answers (2)

user2213334
user2213334

Reputation: 21

I was doing something similar and the issue was that the first time i would hover over the object, tooltipster had not been initialized. The second time, it had been initialized by my attempts the first time.

The solution was to initialize tooltipster on page load.

 jQuery(document).ready(function(){
      /**Initialize all instances of tooltipster **/
      jQuery.fn.tooltipster('setDefaults', {
            theme: 'tooltipster-default'
      });
   }
);

Upvotes: 1

saral
saral

Reputation: 81

You can use this : 

  var tooltipInstance;
    $("body").on('mouseover', '.tooltip:not(.tooltipstered)', function({
          tooltipInstance = $(this).tooltipster({ ... });
          tooltipInstance.tooltipster('open');
    });

In your case :

$(document).ready(function(){
    var tooltipInstance;
    $("body").on('mouseover', '.tooltip:not(.tooltipstered)', function(){
        var content = $(this).attr("id");
        tooltipInstance = $(this).tooltipster({
            animation: 'fade',
            delay: 0,
            speed: 250,
            theme: '.newtooltip',
            content: '<img src="images/ajaxcircle.gif" width="16" height="16" />',

            functionBefore: function (origin, continueTooltip) {
                continueTooltip();
                if (origin.data('ajax') !== 'cached') {
                    $.ajax({
                        type: 'GET',
                        url: 'datagrab.html',
                        data: { ID: content},
                        success: function (data) {
                            origin.tooltipster('update', data).data('ajax ', 'cached');
                        }
                    });
                }
            }
        });
        tooltipInstance.tooltipster('open');
    });
});

Upvotes: 0

Related Questions