jquery qtip ajax,jquery - Qtip Ajax Request not working on first hover - Stack Overflow

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);

}

});

});