jquery范围滑块句柄上的工具提示答案

【问题标题】：tooltip over jquery range slider handlesjquery范围滑块句柄上的工具提示
【发布时间】：2017-08-01 16:36:40
【问题描述】：

我有一个 jquery 范围滑块，我想要一个显示在两个句柄上的工具提示。我的代码如下，改编自http://jsfiddle.net/b6tux4we/ 我只想一次出现一个工具提示。

但对我来说，第一个滑块手柄上的工具提示不会出现。第二个可以，并且工作正常。为什么？我该如何解决？

提前致谢。

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

【问题讨论】：

标签： jquery jquery-ui-slider

【解决方案1】：

无论出于什么原因，都需要搜索 span 而不是 span 的类，否则，tooltip HTML 不会被插入...

所以，而不是

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

这样做：

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

这会产生一个带有工具提示的范围滑块，该工具提示仅在每个跨度手柄悬停时出现。一次只显示一个工具提示，因为您一次只能悬停一个跨度手柄。

【讨论】：