Tooltip über jquery Bereich Schieberegler behandelt

Question

Ich habe eine jQuery Rangeslider, und ich möchte einen Tooltip, der über beide Handles zeigt. Mein Code ist unten und wird von http://jsfiddle.net/b6tux4we/ angepasst Ich möchte nur einen Tooltip zu einer Zeit erscheinen.

Aber für mich wird der Tooltip über die ersten Schieberegler nicht angezeigt. Der zweite tut und funktioniert gut. Warum? Wie kann ich es reparieren?

Vielen Dank im Voraus.

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

Aus irgendeinem Grund ist es notwendig, für Spanne statt der Klasse der Spanne zu suchen, andernfalls wird der Tooltip HTML nicht eingefügt bekommen ...

Anstatt also

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

tun:

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

und dass die Ergebnisse in einem Bereich Slider mit einem Tooltip, die nur als jeder Spa erscheint n handle ist schwebend. Es wird immer nur ein Tooltip angezeigt, da Sie jeweils nur einen Span-Handle schweben lassen können.