javascript - 在 Bootstrap 中向工具提示内部添加描述

Question

我有下面的代码，我想在工具提示中添加对数字的描述。为什么这段代码不起作用？

HTML

<input id="contract-length"
       class="slider slider-step-2 slider-contract-length"
       data-slider-id="slider-contract-length"
       type="text"
       data-slider-min="1"
       data-slider-max="36"
       data-slider-step="1"
       data-slider-value="1"
       data-slider-tooltip="always"/>

Javascript

var slider = new Slider('#contract-length', {
  formatter: function(value) {
    return value + 'msc';
  }
});

Answer 1

来自demo page :您需要创建一个 boostrap 网格，例如:

<div class="container-fluid">
<div class='well row'>
    <h3>Example 1:</h3>
</div>
<div class='well row'>
    <input id="contract-length" class="slider slider-step-2 slider-contract-length"
           data-slider-id="slider-contract-length"
           type="text" data-slider-min="1" data-slider-max="36" data-slider-step="1" data-slider-value="1"
           data-slider-tooltip="always"/>
</div>

var slider = new Slider('#contract-length', {
    formatter: function (value) {
        return value + ' msc';
    }
});

.slider {
    width: 100% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"></script>

<div class="container-fluid">
    <div class='well row'>
        <h3>Example 1:</h3>
    </div>
    <div class='well row'>
        <input id="contract-length" class="slider slider-step-2 slider-contract-length"
               data-slider-id="slider-contract-length"
               type="text" data-slider-min="1" data-slider-max="36" data-slider-step="1" data-slider-value="1"
               data-slider-tooltip="always"/>
    </div>
</div>