The overlapped part of the tooltip of the slider and its position in the plug-loader-slider

Question

I am using Twitter Bootstrap 2.3.2 module and bootstrap-slider in a modal window. The problem is that part of the slider tooltip overlaps behind the title of the modal window and has the wrong position.

I tried to add this rule, but it did not help.

.slider .tooltip{ z-index: 1151 !important; } 

I would like to provide the correct jsfiddle, but I cannot find the plug-in-plug-in cdn. Here is a jsfiddle that does not work because the source of the slider-loader plugin is missing.

jsfiddle

HTML

  <a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a> <div id="options" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Settings</h3> </div> <div class="modal-body"> Vertex size <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br><br> Edge size <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20"/><br> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button class="btn btn-primary" id="saveSettings">Save</button> </div> </div> 

Javascript

 $(document).ready(function () { $('#nodeSize').slider({ formatter: function(value) { return value; } }); $('#edgeSize').slider({ formatter: function(value) { return value; } }); }); 

Answer 1

Add this to your Javascript:

 $("body").on("shown.bs.modal", function() { $("#edgeSize").slider('relayout'); $("#nodeSize").slider('relayout'); }); 

Explanation: When a modality is displayed, the relay function starts on both input fields and again displays a tooltip after initialization.

Source: https://github.com/seiyria/bootstrap-slider#functions

Updated JSfiddle: http://jsfiddle.net/0sryor13/3/

Answer 2

In order for the z-index to work, the element to which you apply it must have a position other than static, for example

 .slider .tooltip{ position: relative; z-index: 1151 !important; }