javascript - 使用 bootstrap css 设计 nouislider 的技巧

Question

我正在尝试格式化 noUi 工具提示以遵循 Bootstrap 设计。但我失败了，想知道是否有可能以任何简单的方式实现。

我尝试根据此处找到的引导模板来格式化标记:

https://v4-alpha.getbootstrap.com/components/tooltips/#markup

HTML

<!-- Generated markup by the plugin -->
<div class="tooltip tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

Javascript

// by changing the noUislider.js function  "addTooltip"
function addTooltip ( handle, handleNumber ) {
    if ( !options.tooltips[handleNumber] ) {
        return false;
    }
    let deg =addNodeTo(handle.firstChild, 'tooltip');
    addClass(deg,'tooltip-top');
    addNodeTo(deg, "tooltip-arrow");
    return addNodeTo(deg, 'tooltip-inner');
    //return addNodeTo(handle.firstChild, options.cssClasses.tooltip);
}

它会生成一个模板，但根本不会显示任何工具提示。所以我可能错过了一些关键的东西。如果我只添加“tooltip-top”，我会得到一个可见的黑色工具提示，但它太小而且乱码。

Answer 1

这就是我的解决方案最终如何在 noUIslider 上使用 bootstrap 工具提示并使用 bootstrap css 设置 slider handle 的样式。

slideDIM.on('update', function(value) {
    $.getq('queue', '/dim/' +  value[0].replace('%', ''));
    $('#slider-dimmer [data-handle="0"]').attr('data-original-title', value).tooltip('show').tooltip('update')
    setTimeout(function(){
        $('#slider-dimmer [data-handle="0"]').tooltip('hide');
        }, 3000);
});

https://jsfiddle.net/8snj9t93/7/

拖动可以工作，但点击 slider 目前看起来不错，所以我已禁用它。