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

Question

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

Answer 1

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