Динамические всплывающие подсказки Twitter для JQuery UI Slider

Question

Как добавить подсказку вверху каждого обработчика слайдера jQuery Ui, используя подсказку Twitter Slider, которая динамически изменяется по мере скольжения пользователя?

Я придумываю это, но оно не гладкое, и иногда всплывающая подсказка исчезает и не стабильна. Другими словами, это не очень хорошо работает.

$( "#mySlider" ).slider({
    range: true,
    step: 5,
    min: 100,
    max: 500,
    values: [150, 300],
    slide: function(event, ui){
        $('.ui-slider-handle').tooltip('show');        
    }
});

$('.ui-slider-handle').attr('title', 'test').tooltip({trigger:'manual'});

Answer 1

Ваша всплывающая подсказка исчезает и мерцает, потому что это то, для чего и был разработан плагин, поэтому вместо использования самого плагина начальной загрузки (что для меня было бы непросто изменить для этой задачи), вы можете просто использовать его разметку и css и перестройте его в jQueryUI. Попробуйте это например:

JS

slide: function(event, ui) {  
        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}

Используя этот метод, мы можем перестроить всплывающую подсказку поверх каждого дескриптора ползунка, которая использует тот же CSS, что и подсказка начальной загрузки, вместе с нашим собственным классом, который мы можем легко изменить, чтобы позиционировать его. Вот так:

CSS

.slider-tip {
    opacity:1;
    bottom:120%;
    margin-left: -1.36em;
}

Демо , правка здесь .

Answer 2

В Github / Bootstrap существует известная тема, связанная с проблемой: Подсказка Twipsy с недостижимой ссылкой внутри .

Там вы можете увидеть, как один из создателей говорит:

Нет способа сделать это. Наши подсказки не были предназначены для интерактивного контента. Если вы этого хотите, лучшим вариантом будет накатить собственное решение, в котором находится подсказка внутри элемента который находится под мышкой, так что событие mouseout не запускается.

И пару месяцев спустя:

О, на самом деле в 2.0 вы можете сделать размещение: «внутри верха», и оно будет вставлять пьяный элемент внутри зависшего элемента. Вам придется сделать некоторые работают с CSS, чтобы убедиться, что он не наследует стили, и т. д. Не уверен, что это действительно сделает его в финальной версии 2.0 выпуск.