Issue on Adding Tooltip to jQuery UI Slider on Hover using Bootstrap Tooltip

Issue on Adding Tooltip to jQuery UI Slider on Hover using Bootstrap Tooltip

Can you please take a look  at this Demo  and let me know why I am not able to add the Tool tip to handler on hover?

  2. $("#slider-range").slider({
  3.     range: true,
  4.     step: 5,
  5.     min: 100,
  6.     max: 500,
  7.     values: [150, 300],
  8.     slide: function (event, ui) {
  9.         $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  10.     }
  11. });

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

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

  17. function () {
  18.     $('.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>');
  19.     $('.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>');
  20. }, function () {

  22. });
the  html()  method work fine when I was using them inside the  slide:  but I need to display them only on hover.

  2. slide: function (event, ui) {
  3.    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  4.    $('.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>');
  5.    $('.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>');
  6.  }
Thanks