Javascript 引导滑块不显示工具提示_Javascript_Jquery_Twitter Bootstrap_Slider

Javascript 引导滑块不显示工具提示

javascript jquery twitter-bootstrap

Javascript 引导滑块不显示工具提示,javascript,jquery,twitter-bootstrap,slider,Javascript,Jquery,Twitter Bootstrap,Slider,问题： <!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=

问题：

<!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>

我使用的是引导滑块，可以在这里找到。使用示例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>

正文{
填充：100px；
}

我知道这已经很晚了，但我一直在寻找解决方案，我在这里发表文章，希望这可能对其他人有所帮助

我设定

工具提示开始显示

使用Bootstrap v4.2.1和最新版本的Bootstrap spinner及其angular指令（在slider.js文件中），我使用了以下HTML

<slider id="intervalSlider" 
    ng-model="refreshInterval" on-stop-slide="intervalChanged($event,value)"
    min="10" step="10" max="60" slider-tooltip="show" ></slider>

这仍然是Bootstrap 4.3.1-的公开问题。引导程序v4尚未完全受支持

在讨论问题的最后，他们展示了我使用的一些解决方案，如下所示：

$（“#ex12c”）.slider（{id:“slider12c”，精度：2，步长：0.01，最小值：0.70，最大值：1.00，范围：真，值：[0.80，0.90]}）
#滑块12c.滑块轨迹高{
背景：#5cb85c；
}
#滑块12C.滑块选择{
背景#ffc107；
}
.滑块句柄：：之后{
内容：attr（aria valuenow）；
位置：绝对位置；
底部：钙（100%+0.5em）；
左：50%；
转化：translateX（-50%）；
字体大小：0.75em；
字号：600；
颜色：#393f50；
背景色：白色；
盒子阴影：0px 0px 6px 0px rgba（182,182,182,0.4）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：0.3em；
宽度：4em；
高度：2.5em；
}





您的示例似乎与预期一样有效，您能为问题添加更多细节吗？作为补充说明，您混合了Bootstrap 3和4依赖项（Bootstrap slider目前不支持Bootstrap 4。@vanburen这可能是原因。我使用的是BS 4，必须使用另一种解决方案，即，但请关注Github页面。
   .slider .tooltip.in {
        opacity: 1;
    }

    .slider .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-top-color: #000;
    }

    .slider .tooltip-arrow {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }

    .slider .tooltip.top {
        padding: 5px 0;
    }