Динамические подсказки для бутстрапа Twitter для jQuery UI Slider

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

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

$( "#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'});
2 ответа

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

JS

slide: function(event, ui) { 
 $('.ui-slider-handle:first').html('<div><div>' + ui.values[0] + '</div></div>');
 $('.ui-slider-handle:last').html('<div><div>' + ui.values[1] + '</div></div>');
}

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

CSS

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

Демо, отредактируйте здесь.


В Gitub/Bootstrap есть известная проблема, связанная с проблемой: Twipy tooltip с недоступной ссылкой внутри.

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

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

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

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

licensed under cc by-sa 3.0 with attribution.