Подсказка не отображается с ползунком Bootstrap - PullRequest
Новая
       5

Подсказка не отображается с ползунком Bootstrap

0 голосов
/ 26 августа 2018

Проблема:

Я использую 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/

Желаемый результат:

Чтобы всегда показывать подсказку при смене ползунка.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Используя Bootstrap v4.2.1 и последнюю версию bootstrap-spinner с их угловой директивой (в их файле 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;
    }
0 голосов
/ 02 декабря 2018

Я знаю, что уже довольно поздно, но я искал решение и отправляю сюда в надежде, что это может помочь кому-то еще.

Я установил 

.tooltip.in {
  opacity: 1;
}

и подсказка начала показываться.

...