tooltip to follow jquery slider handle?

Question

Hello,

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

$(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()}
                )

});

Answer 2

Just about any HTML element can be assigned a tooltip by giving it a 'title' attribute with the requred text being the value of the attribute.

In the case of your slider, can you reliably locate the HTML element used to draw the handle of the slider? If so, simply add a title attribute and you should be in business.

EDIT: Just as a general point, judicious use of the title attribute can make your pages tidier - by adding information that is context sensitive you don't take up screen real estate until it is actually required, and help out those who are unfamiliar with the UI of your site.