使用 bootstrap css 设计 nouislider 的技巧

Question

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

我尝试根据此处找到的 bootstraps 模板格式化标记：

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

这就是我的解决方案如何最终使用 bootstrap 在 noUIslider 上显示工具提示并使用 boootstrap css 设置滑块手柄的样式。

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/

拖动有效，但点击滑块目前看起来不错，所以我禁用了它。

使用 bootstrap css 设计 nouislider 的技巧

Tips styling nouislider with bootstrap css

javascript

css

nouislider

bootstrap-4