How can I change the background color of the tooltip for seiyria bootstrap-slider when it is in disabled mode?
I am facing the issue of changing the tootltip color for seiyria bootstrap-slider when it is in disabled mode.
HTML:
<slider ng-model="myCtrl.sliderValue" ng-min="0"
ng-disabled="myCtrl.ischlddsble"
ng-max="5"
step="1"
value="myCtrl.sliderValue"
ticks="myCtrl.sliderTicks()"
formatter="myCtrl.myFormatter"
tooltip="always"
id="divID"></slider>
<input type="checkbox"
ng-model="myCtrl.ischlddsble"
ng-click="myFunc()"/>
JavaScript:
function myFunc(x, _this) {
if (_this.checked) {
x.style.backgroundColor = '#0000FF';
} else {
x.style.backgroundColor = '#FF0000';
}
}
With ng-disabled I disabled the slider, but I need to change the tooltip color in the same way as the slider when it is in disabled mode. As shown in the picture below.
+3
source to share
1 answer
Just do it by accessing the CSS class slider-disabled
via CSS like in this DEMO FIDDLE you created.
.slider-disabled .tooltip-inner {
background-color: red;
}
.slider-disabled .tooltip.top .tooltip-arrow {
border-top-color: red;
}
+1
source to share