CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
J.Doe
J.Doe

Reputation: 9

Adding description to tooltip inner in Bootstrap

I have the code below and I'd like to add description to numbers in my tooltip. Why this code doesn't work?

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';
  }
});

Upvotes: 1

Views: 227

Answers (1)

gaetanoM
gaetanoM

Reputation: 42044

From the demo page: you need to create a boostrap grid like:

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

Upvotes: 1

Related Questions