Question

我正在使用带有工具提示的bootstrap-slider，是否可以在此处添加html来格式化工具提示中的内容？目前，它只显示滑块的值

我想在不同字体大小的值上方和下方添加文字

var slider = new Slider('#l-calculator', {
  tooltip: 'always',
  formatter: function (value) {
    return '£' + value + '.00';
  }
});

Answer 1

目前无法将HTML放在工具提示中。

Answer 2

当然可以！您只需要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>

在bootstrap-slider工具提示中添加html代码

2 个答案: