JS tooltip跟随range的问题

cqwcns 9月前 106

如这个实例,tooltip位置是固定的,我希望tooltip的位置跟随range的圆点,代码要怎么写?请各位大哥指教,谢谢[JavaScript] 纯文本查看 复制代码
<!doctype html><html><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" ><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body></br></br></br></br><div class="row">  <label for="ranCanvasWidth">画布宽度</label>  <div>    <input type="range" class="custom-range" min="1" max="12" id="ranCanvasWidth" value="12" data-toggle="tooltip" title="我是提示内容!">  </div></div><script>$(document).ready(function(){$("body").on("mousemove", "#ranCanvasWidth", function () {$(this).attr("data-original-title", Number(($(this).val() / $(this).attr("max")) * 100).toFixed(0) + "%");$(this).tooltip('show');});});</script></body></html>
最新回复 (1)
  • 展小哥 9月前
    引用 2
    先获取input的width,然后在row加上position: relative;
    监听input的值,当值变动,取值,在根据值计算位置百分比,设置下tooltip的left
  • 游客
    3
返回