我正在使用带有工具提示的引导滑块，是否可以在其中添加html以格式化工具提示中的内容？目前，它仅显示滑块的值
我想以不同的字体大小在我的值上方和下方添加文本
var slider = new Slider('#l-calculator', {
tooltip: 'always',
formatter: function (value) {
return '£' + value + '.00';
}
});
当然，这是可能的！你只需要一些JQuery和一些CSS的帮助。
$(document).ready(function(){
//Insert the elements at the top and bottom
//in this case, each is a DIV with a class
//in the middle of both DIVs is the current content
$("div.tooltip-inner").html("<div class='top'>I'm on top</div>"+$("div.tooltip-inner").html() + "<br><div class='bottom'>I'm below</div>");
//To keep the Tooltip updated, we tied the change of the content to 2 events:
//'slide' (every time the handles are dragged) and 'slideStop'
//(when the handle is released)
$("#range").on("slide slideStop", function(slideEvt) {
//the action is the same as when we initiated the element, we replace
//all the content with the DIVs and the real content in the middle
$("div.tooltip-inner").html("<div class='top'>I'm on top</div>"+$("div.tooltip-inner").html() + "<br><div class='bottom'>I'm below</div>");
});
});/*Keep the Tooltip Visible and in a height above the slide bar*/
.tooltip {
opacity:0.9;
top: -30px;
}
/*Add custom color to the top and bottom DIVs: feel free to make your own here*/
div.tooltip-inner .top {
color: red !important;
font-size:large;
opacity: 0.9 !important;
}
div.tooltip-inner .bottom {
color: blue !important;
opacity: 0.9 !important;
}<html>
<head>
<title>Bootstrap Slider</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/css/bootstrap-slider.min.css">
</head>
<body>
<div class="jumbotron text-center">
<br><br><br><br>
<label>Range Slider with custom Tooltip</label>
<input id="range" type="text"/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
<script>
// Range Slider
var slider = new Slider("#range", {
min: 0,
max: 100,
value: [50, 80],
range: true,
tooltip: 'always',
formatter: function (a) {
return Array.isArray(a) ? "£ "+ a[0] + ".00 to £ " + a[1] + ".00" : "£ "+a+".00"
}
});
</script>
</body>
</html>目前无法将 HTML 放在工具提示中。