javascript - How to add tooltip to jQuery UI Slider on hover using Bootstrap Tooltip

I am working on this demo. Why am I not able to add the tooltip to handler on hover?

$("#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 () {

});

The html() method works fine when I was using them inside the slide: but I need to display them only on hover.

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

I am working on this demo. Why am I not able to add the tooltip to handler on hover?

$("#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 () {

});

The html() method works fine when I was using them inside the slide: but I need to display them only on hover.

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

Share Improve this question edited Oct 2, 2022 at 9:51 halfer 20.5k19 gold badges109 silver badges202 bronze badges asked Mar 13, 2014 at 23:26 Mona Coder 6,31618 gold badges70 silver badges138 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 9

I checked your code. There were multiple problems with it. Firstly, you don't have ui object in hover function. So, you can't access it. The hover event fires only when mouser enter and mouser leave occurs. So, you got put the hover function inside the slide function to show the changing value when you drag the handle. I have also added some other modifications.

Javascript after the modifications:

$("#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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to add tooltip to jQuery UI Slider on hover using Bootstrap Tooltip - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)