Slider with Tooltip

In this post we will show you how to display a tooltip over the slider thumb when we drag it. We’ll skip the initialization of the jqxSlider and will move to the tooltip implementation. 1. Add the CSS style settings for the tooltip.
   <style type="text/css">
        position: absolute;
        width: 20px;
        height: 15px;
        background: black;
        color: white;
        font-size: 13px;
        z-index: 20;
        padding: 3px;
        text-align: center;
2. The ‘createTooltip’ function below will create the tooltip and add it to the document’s body.
    function createTooltip() {
        var tooltip = $('<div />');
        tooltip.css('visibility', 'hidden');
        tooltip.fadeTo(0, 0.6);
        return tooltip;
3. The ‘refreshTooltip’ function updates the tooltip’s position and text.
   function refreshTooltip(value) {
        var thumb = $($('#slider').find('.jqx-slider-slider')[1]),
            thumbX = thumb.offset().left,
            thumbY = thumb.offset().top;
        tooltip.css('left', thumbX - (tooltip.outerWidth(true) - thumb.outerWidth(true)) / 2);
        tooltip.css('top', thumbY - tooltip.outerHeight(true) - 3);
Let’s see how it works: At first, we find the thumb’s position. Then we save the ‘left’ and ‘top’ position in the thumbX and thumbY fields. After that we position the tooltip. Finally, we set the tooltip’s text to the slider value. 4. Now, it is time to implement the logic when the tooltip should be visible or hidden. We will trigger the ‘mousedown’, ‘mousemove’ and ‘mouseup’ events. In the ‘mousedown’ handler, we will show the tooltip and set its text and position. The ‘mousemove’ handler will update the position and text. In the ‘mouseup’ handler, we will hide the tooltip.
  var thumb = $($('#slider').find('.jqx-slider-slider')[1]),
  tooltip = createTooltip(),
  tooltipActive = false;

  thumb.bind('mousedown', function (event) {
    tooltip.css('visibility', 'visible');
    tooltipActive = true;

  $(document).bind('mousemove', function (event) {
    if (tooltipActive) {
  $(document).bind('mouseup', function () {
    tooltip.css('visibility', 'hidden');
    tooltipActive = false;
Here’s how it looks:

About admin

This entry was posted in JavaScript, JavaScript Plugins, JavaScript Widgets, jQuery, jQuery Plugins, jQuery UI Plugins, jQuery UI Widgets, jQuery Widgets, jQWidgets, jqxSlider and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply