gpt4 book ai didi

javascript - Bootstrap Slider 不显示工具提示

转载 作者:行者123 更新时间:2023-11-30 07:00:08 24 4
gpt4 key购买 nike

问题:

我正在使用 Bootstrap Slider,可以在这里找到 https://seiyria.com/bootstrap-slider/ .使用示例 8 时,工具提示不会像在网站上那样显示。

最小工作示例 (MWE):

<!DOCTYPE html>
<html lang="sv">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>

<body>

<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>

</html>

示例片段:

$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
body {
padding: 100px;
}
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">

<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>

JS fiddle :

http://jsfiddle.net/2u4xs9cv/1/

期望的结果:

当 slider 变化时始终显示工具提示。

最佳答案

我知道这已经很晚了,但我一直在寻找解决方案并在此处发帖,希望这可能对其他人有所帮助。

我设置

.tooltip.in {
opacity: 1;
}

工具提示开始显示。

关于javascript - Bootstrap Slider 不显示工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52027988/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com