Question

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

我尝试根据此处的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

这就是我的解决方案最终在noUIslider上使用bootstrap到工具提示并使用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/

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

提示造型nouislider与bootstrap css

1 个答案: