Question

I am wondering if it would be possible to attach a tooltip to the slider handle? My current slider function is:

            $('#slider').slider({
                max: 18,
                animate: 'slow',
                orientation: 'vertical',
                slide: function(e,ui) {
                    $('#storage').html(storage[ui.value-1]);
                    $('#ram').html(ram[ui.value-1]);
                    $('#bandwidth').html(bandwidth[ui.value-1]);
                    $('#cpu').html(cpu[ui.value-1]);
                    $('#price').html(price[ui.value-1]);
                }
            });

I want to take this and apply a tooltip to follow the handle. Would it be recommanded to somehow determine the position and dynamically update the tooltip position based on slider position?

Answer 1

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});

However if you want full control use this sample

Preview: http://jsbin.com/eluqi3/166/edit

$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});