info-bulle sur les poignées du curseur de la plage jquery

Question

J'ai une plage de jquery, et j'aimerais avoir une info-bulle qui s'affiche sur les deux poignées. Mon code est ci-dessous, et est adapté de http://jsfiddle.net/b6tux4we/ Je veux juste une info-bulle à apparaître à la fois.

Mais pour moi, l'info-bulle sur les premières poignées de curseur n'apparaît pas. Le deuxième fait, et fonctionne bien. Pourquoi? Comment puis-je le réparer?

Merci d'avance.

var tooltipmin_blobSpeed = $("<div style='font-weight:bold; border: 1px solid black;border-radius:4px; background-color:black; color:white; padding:3px' id='tooltip' />").css({ 
    position: 'absolute', 
    top: -30, 
    left: -5 
}).hide(); 
var tooltipmax_blobSpeed = $("<div style='font-weight:bold; border: 1px solid black;border-radius:4px; background-color:black; color:white; padding:3px' id='tooltip' />").css({ 
    position: 'absolute', 
    top: -30, 
    left: -5 
}).hide(); 

var blobSpeedSlider = $("#slider_blobSpeed").slider({ 
    range: true, 
    min: 0, 
    max: 10, 
    values: [ 1, 10 ], 
    slide: function(event, ui) { 
     blobSpeedMinimum[currentblob] = ui.values[0] 
     blobSpeedMaximum[currentblob] = ui.values[1] 

     tooltipmin_blobSpeed.text(ui.values[0]) 
     tooltipmax_blobSpeed.text(ui.values[1]) 

    }, 
    change: function(event, ui) { 
     tooltipmin_blobSpeed.text(ui.values[0]) 
     tooltipmax_blobSpeed.text(ui.values[1]) 
    }  
}) 

$("#slider_blobSpeed") 
    .find("ui-slider-handle") 
    .first() 
    .append(tooltipmin_blobSpeed) 
    .hover(function() { 
     tooltipmin_blobSpeed.show(); 
    }, function() { 
     tooltipmin_blobSpeed.hide(); 
}) 

$("#slider_blobSpeed") 
    .find(".ui-slider-handle") 
    .last() 
    .append(tooltipmax_blobSpeed) 
    .hover(function() { 
     tooltipmax_blobSpeed.show(); 
    }, function() { 
     tooltipmax_blobSpeed.hide(); 
}); 

Answer 1

Pour une raison quelconque, il est nécessaire de rechercher au lieu de la durée de la classe de durée, sinon, le code HTML de infobulle ne soit pas inséré ...

Ainsi, au lieu de

$("#slider_blobSpeed") 
.find(".ui-slider-handle") 
.last() 
.append(tooltipmax_blobSpeed) 
.hover(function() { 
    tooltipmax_blobSpeed.show(); 
}, function() { 
    tooltipmax_blobSpeed.hide(); 
}); 

Faites ceci:

$("#slider_blobSpeed") 
.find("span") 
.first() 
.append(tooltipmax_blobSpeed) 
.hover(function() { 
    tooltipmax_blobSpeed.show(); 
}, function() { 
    tooltipmax_blobSpeed.hide(); 
}); 

et que les résultats dans un curseur de plage avec une info-bulle qui apparaît seulement comme chaque spa n poignée est plané. Une seule info-bulle s'affiche à la fois, car vous ne pouvez placer qu'une seule poignée de span à la fois.