使用引导工具提示在悬停时将工具提示添加到 jQuery UI 滑块的问题答案

【问题标题】：Issue on Adding Tooltip to jQuery UI Slider on Hover using Bootstrap Tooltip使用引导工具提示在悬停时将工具提示添加到 jQuery UI 滑块的问题
【发布时间】：2014-03-13 23:26:19
【问题描述】：

能否请您看一下at this Demo，让我知道为什么我无法在悬停时将工具提示添加到处理程序？

$("#slider-range").slider({
    range: true,
    step: 5,
    min: 100,
    max: 500,
    values: [150, 300],
    slide: function (event, ui) {
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
    }
});

$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

$('.ui-slider-handle').hover(

function () {
    $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
    $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}, function () {

});

html() 方法在我在 slide: 中使用它们时工作正常，但我只需要在悬停时显示它们。

slide: function (event, ui) {
   $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
   $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
   $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
 }

谢谢

【问题讨论】：

标签： javascript jquery jquery-ui twitter-bootstrap-3 jquery-ui-slider

【解决方案1】：

我检查了你的代码。它有很多问题。首先，悬停功能中没有 ui 对象。因此，您无法访问它。仅当鼠标进入和鼠标离开时才会触发悬停事件。因此，您将悬停功能放在滑动功能中，以在拖动手柄时显示变化的值。我还添加了一些其他修改。

修改后的Javascript：

$("#slider-range").slider({
    range: true,
    step: 5,
    min: 100,
    max: 500,
    values: [150, 300],
    slide: function (event, ui) {
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
            $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
    }
});

$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));

$( ".ui-slider-handle" ).mouseleave(function() {
$('.ui-slider-handle').html("");
}) 
$( ".ui-slider-handle" ).mouseenter(function() {
var value = $( "#slider-range" ).slider( "option", "values" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
})

working fiddle

【讨论】：