文章/答案/技术大牛

发布

社区首页 >问答首页 >工具提示没有用引导滑块显示

问工具提示没有用引导滑块显示
EN

Stack Overflow用户

提问于 2018-08-26 16:04:15

回答 3查看 7.4K关注 0票数 4

问题：

我使用的引导带滑翔机，这可以在这里找到https://seiyria.com/bootstrap-slider/。当使用示例8时，工具提示不会像在网站上那样显示。

最小工作示例：

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

期望的结果：

在滑块更改时始终显示工具提示。

javascript

jquery

twitter-bootstrap

slider

回答 3

Stack Overflow用户

发布于 2018-12-02 00:34:44

我知道这已经很晚了，但我正在寻找一个解决方案，并在这里张贴，希望这可能会对其他人有所帮助。

我设置

.tooltip.in {
  opacity: 1;
}

工具提示开始显示。

票数 14

Stack Overflow用户

发布于 2019-02-01 18:37:15

使用引导v4.2.1和最新版本的引导旋转器(在它们的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>

我发现牙尖和箭头没有显示出来。我将以下CSS添加到我的自定义CSS文件中

   .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;
    }

票数 6

Stack Overflow用户

发布于 2019-11-19 11:04:56

这仍然是尚未解决的问题启动4.3.1-#689.Bootstrap v4还没有得到完全支持。

在讨论的最后，我们向他们展示了一些解决方案，我将使用以下方法：

$("#ex12c").slider({ id: "slider12c", precision:2, step:0.01, min: 0.70, max: 1.00, range: true, value: [0.80, 0.90] });

#slider12c .slider-track-high {
    background: #5cb85c;
}

#slider12c .slider-selection {
    background: #ffc107;
}


.slider-handle::after{
    content: attr(aria-valuenow);
    position: absolute;
    bottom: calc(100% + 0.5em);
    left: 50%;
    transform: translateX(-50%);

    font-size: 0.75em;
    font-weight: 600;
    color: #393f50;
    background-color: white;
    box-shadow: 0px 0px 6px 0px rgba(182, 182, 182, 0.4);

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3em;
    width: 4em;
    height: 2.5em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />   
    
    <!-- Bootstrap 4 CDN CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
     <!-- Bootstrap 3 slider -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/css/bootstrap-slider.min.css" />  
</head>

<body>
  <br /> 
  <br />  
  <input id="ex12c" type="text"/>
  <!-- Bootstrap 4 CDN JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.6.2/bootstrap-slider.min.js">
  </script>
  
<body/>
<html/>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52027988

复制

相似问题

问工具提示没有用引导滑块显示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问工具提示没有用引导滑块显示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问工具提示没有用引导滑块显示
EN