javascript - Bootstrap Slider 不显示工具提示

标签 javascript jquery twitter-bootstrap slider

问题:

我正在使用 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/

相关文章:

jQuery 获取所有没有 class 属性的 div

javascript - 无法调用未定义的方法 'click'

javascript - 如何在 UI Router 中重构单独状态和抽象状态?

javascript - 如何将 jQuery Lazy 与 AJAX 结合使用?

php - 通过表单重定向而不给出错误

jquery - 使用 Bootstrap 设计递增和递减数字

javascript - 如何向选择框的某些选项添加文本?

jquery - 当父项悬停时,我可以更改包含元素的 CSS 吗?

css - 如何在 Twitter 的 Bootstrap 中正确定位额外的子导航?

jquery - 基于多个属性的Grails Bootstrap.js下拉搜索