时间戳

首页 > 解决方案 > 在引导滑块工具提示中添加 html 代码

jquery - 在引导滑块工具提示中添加 html 代码

问题描述

我正在使用带有工具提示的引导滑块，是否可以向其中添加 html 以格式化工具提示内的内容？目前，它只显示滑块的值

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

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

标签： jquerybootstrap-slider

解决方案

当然，这是可能的！你只需要一点来自 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>

推荐阅读