试图获取当前位置的工具提示

Posted 2023-05-08

【中文标题】试图获取当前位置的工具提示

【英文标题】：Trying to get Tooltip for the Current Position

【发布时间】：2021-07-30 06:53:17

【问题描述】：

我有一个滑块和一个小的输入文本框，它会根据您在其上滚动的位置进行更新。

这里是javascript：

$(function() 
  
  var tooltip = $('<div id="tooltip" />').css(
    position: 'absolute',
    top: -25,
    left: -10
).hide();
    $("#client-slider").slider(
      range: "min",
      value: 30,
      min: 15,
      max: 300,
      slide: function(event, ui) 
        $('#client').val(ui.value).trigger("change");
           tooltip.text(ui.value);
      ,
    change: function(event, ui) 
).find(".ui-slider-handle").append(tooltip).hover(function() 
    tooltip.show();
, function() 
    tooltip.hide();
);
    );
    $("#client").val($("#client-slider").slider("value"));
  

这里是 html/css：

<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>​

我收到一个错误，无法在我的滑块上显示工具提示

**请注意它不是任何现有问题的重复 - 我试图从这个 answer 获得帮助，但都是徒劳的

【参考方案1】：

从旧帖子中获取答案通常是个坏主意。这个实现更新了很多，也没有那么复杂：

document.getElementById("slider").addEventListener("input", function(event) 
  document.getElementById("budget").value = event.target.value;
)

<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>

完整代码：

<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>

<script type="text/javascript">
    document.getElementById("slider").addEventListener("input", function(event) 
        document.getElementById("budget").value = event.target.value;
    )
</script>

对于基于 answer 的 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/1000)*100 + "%");
        $( "#client" ).val((ui.value/1000)*100 + "%");
    ,
    change: function(event, ui) 
).find(".ui-slider-handle").append(tooltip).hover(function() 
    tooltip.show()
, function() 
    tooltip.hide()
)

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">

<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

也可以在fiddle 上试试。

【讨论】：

谢谢@Prosy 基本上我不能使用这个——我已经使用了 Divs 和 jquery-ui 滑块——很多依赖项所以不能切换到任何新的解决方案——有什么办法可以修改我的代码 ？我只想要滑块点上方的工具提示

@SkillUp 这真的有我。我不知道 jqueryui 应该有另一个导入。从来没用过。但现在很好。

非常感谢先生，我们有什么办法可以根据最小值/最大值将其转换为百分比？如果你回复它会很有帮助:)

更新了答案以使值百分比

jsfiddle.net/x7a1ksjr 我试图根据我的价值获得 1-100% 的百分比，但它只会上升到 30%