Fix for slider tooltip overlapping other content.

views/_main.html

@@ -72,6 +72,10 @@
             .restart {
                 color: orange;
             }
+
+            .slider_span {
+                margin-left: 1em;
+            }
         </style>
     {% endblock head %}
 
@@ -346,9 +350,12 @@
                 $('[data-toggle="tooltip"]').tooltip({html: true});
             });
 
-            $(".slider").slider({
+            $(".slider").slider();
-                tooltip: 'always',
+            $(".slider").on("slide", function(slideEvt) {
-                tooltip_position: 'bottom'
+                $(this).next("span").text(slideEvt.value);
+            });
+            $(".slider").each(function() {
+                $(this).next("span").text($(this).val());
             });
 
             events = io.connect({

views/settingsradarr.html

@@ -114,6 +114,7 @@
                     </div>
                     <div class="col-sm-8">
                         <input class="slider" id="settings-general-minimum_score_movie" name="settings-general-minimum_score_movie" data-slider-id='settings-general-minimum_score_movie' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.minimum_score_movie}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <div class="row">

views/settingssonarr.html

@@ -114,6 +114,7 @@
                     </div>
                     <div class="col-sm-8">
                         <input class="slider" id="settings-general-minimum_score" name="settings-general-minimum_score" data-slider-id='settings-general-minimum_score' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.minimum_score}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <div class="row">

views/settingssubtitles.html

@@ -79,6 +79,7 @@
                     </div>
                     <div class="col-sm-4">
                         <input class="slider" id="settings-general-days_to_upgrade_subs" name="settings-general-days_to_upgrade_subs" data-slider-id='settings-general-days_to_upgrade_subs' type="text" data-slider-min="0" data-slider-max="30" data-slider-step="1" data-slider-value="{{settings.general.days_to_upgrade_subs}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <br>
@@ -313,8 +314,9 @@
                     <div class="col-sm-5 text-right">
                         <b>Only for score below</b>
                     </div>
-                    <div class="col-sm-1">
+                    <div class="col-sm-4">
                         <input class="slider" id="settings-subsync-subsync_threshold" name="settings-subsync-subsync_threshold" data-slider-id='settings-subsync-subsync_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.subsync.subsync_threshold}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <br>
@@ -334,8 +336,9 @@
                     <div class="col-sm-5 text-right">
                         <b>Only for score below</b>
                     </div>
-                    <div class="col-sm-1">
+                    <div class="col-sm-4">
                         <input class="slider" id="settings-subsync-subsync_movie_threshold" name="settings-subsync-subsync_movie_threshold" data-slider-id='settings-subsync-subsync_movie_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.subsync.subsync_movie_threshold}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <br>
@@ -375,6 +378,7 @@
                     </div>
                     <div class="col-sm-4">
                         <input class="slider" id="settings-general-postprocessing_threshold" name="settings-general-postprocessing_threshold" data-slider-id='settings-general-postprocessing_threshold' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.postprocessing_threshold}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <br>
@@ -399,6 +403,7 @@
                     </div>
                     <div class="col-sm-4">
                         <input class="slider" id="settings-general-postprocessing_threshold_movie" name="settings-general-postprocessing_threshold_movie" data-slider-id='settings-general-postprocessing_threshold_movie' type="text" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="{{settings.general.postprocessing_threshold_movie}}"/>
+                        <span class="slider_span"></span>
                     </div>
                 </div>
                 <br>