How I can add tool-tip on UI slider handle. I am using PHP and Jquery-CodePudding

I am not much familiar with programming language. I added a UI Slider with min, max, and step with value of 5. Now I want to add a Tool tip on slider Handler. here is my code.

I WANT TO ADD mouse HANDLE HOVER ON Slider Handle

var activeMonth = (last_checked.length - 1);

$("#slider").slider({
    min: 0,
    max: activeMonth,
    step: 1,
    value: activeMonth,

  }).slider("pips", {
    rest: "label",
    step: 5,
    labels: last_checked
  })
  .on("slidechange", function(e, ui) {

    var point_positions = get_position(kwrd_id, allchecks[ui.value]['last_checked']);

    if (point_positions != '') {
      printGeoGrid(point_positions);
    } else {
      clearMarkers();
    }

  });

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.4/jquery-ui-slider-pips.css">

</div>
<div id="slider" style="width:90%;margin:auto;margin-top: 15px"></div>
</div>

CodePudding user response：

Review the document at https://github.com/simeydotme/jQuery-ui-Slider-Pips?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

There is a float option for the library. here is an example.

$(function() {
  $("#slider").slider({
    min: 1,
    max: 12,
    step: 1,
    value: 10
  }).slider("pips", {
    rest: "label",
    step: 5,
    labels: {
      first: "1",
      rest: "pip"
    }
  }).slider("float", {
    handle: true,
    rest: "label",
    step: 5,
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  })
  /*
  .on("slidechange", function(e, ui) {

    var point_positions = get_position(kwrd_id, allchecks[ui.value]['last_checked']);

    if (point_positions != '') {
      printGeoGrid(point_positions);
    } else {
      clearMarkers();
    }
  });
  */
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.5/jquery-ui-slider-pips.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-ui-Slider-Pips/1.11.5/jquery-ui-slider-pips.js" integrity="sha512-RMAZXXExv fEDNgrTPPEKoAxWSba/QrlfvRc3VXRjD832rVUIjze6vCJrfLAPYaagpWzPy9y41MhU/lGEr7cFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div>
  <div id="slider" style="width:90%;margin:auto;margin-top: 45px"></div>
</div>

The snippet runs when you add all the proper libraries. If you add float options, it makes a tool tip.