Javascript JQueryUI 滑块 - 当前位置的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11192442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQueryUI Slider - Tooltip for the Current Position
提问by MarkRobbo
At the moment I have a slider and an small input text box which updates based on where you scroll on it.
目前我有一个滑块和一个小的输入文本框，它会根据您滚动的位置进行更新。
Here is the javascript:
这是javascript：
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
$("#budget").val(ui.value);
},
change: function(event, ui) {}
});
$("#budget").val($("#slider").slider("value"));?
And here is the html/css:
这是 html/css：
<input type="text" id="budget" style="width:50px;text-align:center"/>
<div id="slider"></div>?
However it looks a bit odd having the small text box with the figure just at the top of the slider, so I would like it to update its horizontal position so it is above the handle of the slider (.ui-slider-handle) if possible - like a sort of tooltip.
然而，在滑块顶部有一个带有图形的小文本框看起来有点奇怪，所以我希望它更新它的水平位置，使其位于滑块（.ui-slider-handle）的手柄上方，如果可能 - 就像一种工具提示。
回答by j08691
I'm not sure if you need the input field or just a way to display the text, but you can show a tooltip like this jsFiddle example.
我不确定您是否需要输入字段或只是一种显示文本的方式，但您可以显示像这个jsFiddle example的工具提示。
jQuery
jQuery
var tooltip = $('<div id="tooltip" />').css({
position: 'absolute',
top: -25,
left: -10
}).hide();
$("#slider").slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text(ui.value);
},
change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
tooltip.show()
}, function() {
tooltip.hide()
})?
