Qtip Ajax Demande ne fonctionnant pas au premier vol stationnaire

Question

Je veux montrer le contenu ajax chargé lorsque la souris survole l'élément, j'utilise qTip pour y parvenir, mais cela ne fonctionne que lorsque je le planque pour la deuxième fois.

$(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); 
     } 
    }); 
} 

}); Voici mon fiddle.

Answer 1

Tout d'abord - La plus simple soultion ici sera d'utiliser le qtip Ajax plugin - Donc, vous n'aurez pas besoin de faire avec. Cependant, juste pour expliquer ce qui s'est passé avec votre code - Le problème est que vous n'initialisez qtip que sur le premier survol de la souris sur l'élément.

Donc, vous devez diviser votre code en 2:

qtip Init: (Notez que le contenu doit contenir au moins un caractère)

$('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 
    } 
    }, 
}); 

L'événement mouseenter réelle, ce qui change la qtip ' contenu » en utilisant l'API qtip (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); 
     } 
    }); 
});