Qtip Ajax Request not working on first hover

Question

I want to show ajax loaded content when mouse hovers over element, I'm using qTip to achieve this, however it works only when I hover for the second time.

$(document).on('mouseenter', 'span', function(){
if(!$(this).data('qtip')){
    $.ajax({
        context : this,
        url     : '/', 
        success : function(html) {
            $(this).qtip({
                content: "..now it works.",
                position: {
                    my: 'top left',
                    target: 'mouse',
                    //viewport: $(window), // Keep it on-screen at all times if possible
                    adjust: {
                        x: 10,  y: 10
                    }
                },
            });
        },
        error   : function(err){
            console.log(err.reponseText);
        }
    }); 
}

}); Here is my fiddle.

Answer 1

First - The easiest soultion here will be to use the qtip Ajax plugin - So you won't need to deal with it.

However, just to explain what went wrong with your code - The problem is that you are initializing qtip only on the first mouse hover on the element.

So, you need to split your code into 2:

qtip Init: (Note that content must hold at least one character)

$('span').qtip({
  content: " ",
  position: {
    my: 'top left',
    target: 'mouse',
    //viewport: $(window), // Keep it on-screen at all times if possible
    adjust: {
      x: 10,  y: 10
    }
  },
});

The actual mouseenter event, which changes the qtip 'content' using qtip API (http://qtip2.com/api)

$(document).on('mouseenter', 'span', function(){
        $.ajax({
        context : this,
        url     : '/', 
        success : function(html) {        
            $(this).qtip('option', 'content.text', 'response');
        },
        error   : function(err){
            console.log(err.reponseText);
        }
    }); 
});