CODEWITHSUNDEEP
javascriptjqueryjquery-ui-slider
Idilassi Jassi
Idilassi Jassi

Reputation: 357

Show tooltip on jquery ui slider with multiple handles

I have a Jquery ui slider with multiple handles that i can add and remove, i want to show a tooltip above the handle while moving it, this is the code i created:

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 20;

//add handle to the slider
$('button').bind('click', function(e) {

  e.preventDefault();

  $(".slider").slider("destroy");

  values.push(val);
  values = values.sort();

  $(".slider").slider({
    min: 0,
    max: 100,
    steps: 1,
    values: values
  })

})

//create the slider
$(".slider").slider({
  min: 0,
  max: 100,
  steps: 1,
  values: values,
  slide: function(event, ui) {
    tooltip.text(ui.value);
  },
  change: function(event, ui) {}

}).find(".ui-slider-handle").append(tooltip).hover(function() {
  tooltip.show()
}, function() {
  tooltip.hide()
});

//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
  if ($('.ui-slider-handle').length > 2)
    $(this).remove();
    //alert($(this)[0].style.left);
})

Jsfiddle example

As you can see in the example the tooltip works fine but it doesn't appear in the right position, and also it doesn't work with newly created handles.

Please can someone help me with this

Thank you

Upvotes: 0

Views: 977

Answers (1)

Oake Pachara
Oake Pachara

Reputation: 46

First issue: bind is deprecated, use on

When you destroy the slider you remove also the tooltip!

Therefore, on button click, before destroying the slider you need to preserve a copy of your tooltip (jQuery.clone()) so you can reuse it again.

In order to simplify everything you may use a slider create function.

In order to solve the last issue (...but it doesn't appear in the right position) you need to change this line of code:

tooltip.text(ui.value);

to:

$(this).find('div').text(ui.value);

The snippet:

function createSlider(tooltip, values) {
   $(".slider").slider({
          min: 0,
          max: 100,
          steps: 1,
          values: values,
          slide: function(event, ui) {         
            $(this).find('div').text(ui.value);
          },
          change: function(event, ui) {}
          
        }).find(".ui-slider-handle").append(tooltip).hover(function() {
          $(".ui-slider-handle").find('div').hide()
          $(this).find('div').show();      
        });
}

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 23;

$('button').on('click', function(e) {

    e.preventDefault();

    //
    // preserve tooltip
    //
    tooltip = $('#tooltip').clone();
    $(".slider").slider("destroy");

    values.push(val);
    values = values.sort();

    createSlider(tooltip, values);
})


createSlider(tooltip, values);

$(document).on('dblclick', '.ui-slider-handle', function() {
    if ($('.ui-slider-handle').length > 2)
        $(this).remove();
    //alert($(this)[0].style.left);
})
body {
    margin-top: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div class="slider"></div>
<br>
<button>Click it!</button>

Upvotes: 1

Related Questions