Adding description to tooltip inner in Bootstrap

Question

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

gaetanoM · Accepted Answer · 2017-09-02 16:07:08Z

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>

Collectives™ on Stack Overflow

Adding description to tooltip inner in Bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related