[英]Issue on Adding Tooltip to jQuery UI Slider on Hover using Bootstrap Tooltip
你能否看一下這個Demo ,讓我知道為什么我無法在懸停時將工具提示添加到處理程序中?
$("#slider-range").slider({
range: true,
step: 5,
min: 100,
max: 500,
values: [150, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').hover(
function () {
$('.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>');
}, function () {
});
當我在slide:
使用它時, html()
方法正常工作slide:
但我只需要在懸停時顯示它們。
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$('.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>');
}
謝謝
我檢查了你的代碼。 這有很多問題。 首先,你在懸停功能中沒有ui對象。 所以,你無法訪問它。 僅當mouser進入並且發生mouser leave時,懸停事件才會觸發。 因此,您將懸停功能置於幻燈片功能中,以在拖動手柄時顯示更改的值。 我還添加了一些其他修改。
修改后的Javascript:
$("#slider-range").slider({
range: true,
step: 5,
min: 100,
max: 500,
values: [150, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$('.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>');
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$( ".ui-slider-handle" ).mouseleave(function() {
$('.ui-slider-handle').html("");
})
$( ".ui-slider-handle" ).mouseenter(function() {
var value = $( "#slider-range" ).slider( "option", "values" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.