Подсказку для выполнения ручки слайдера jquery?

Мне интересно, можно ли прикрепить всплывающую подсказку к ручке ползунка? Моя текущая функция слайдера:

            $('#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]);
                }
            });

Я хочу взять это и применить всплывающую подсказку, чтобы следовать за дескриптором. Было ли рекомендовано каким-то образом определить положение и динамически обновить положение всплывающей подсказки в зависимости от положения ползунка?

Ответы

Ответ 1

Фактически использование атрибута title является более простым (идея белугабоба)

$(function() {


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

});

Однако, если вы хотите, чтобы полный контроль использовал этот образец

Предварительный просмотр: 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()}
                )

});

Ответ 2

Как раз любому элементу HTML может быть назначена подсказка, присвоив ему атрибут 'title', а требуемый текст будет значением атрибута.

В случае вашего слайдера вы можете надежно найти элемент HTML, используемый для рисования дескриптора ползунка? Если это так, просто добавьте атрибут title и вы должны быть в бизнесе.

EDIT: Как правило, разумное использование атрибута title может сделать ваши страницы более точными - добавив информацию, которая чувствительна к контексту, вы не занимаетесь экранной недвижимостью до тех пор, пока она не понадобится, и помогите тем, кто не знаком с пользовательским интерфейсом вашего сайта.