是否可以指定noUiSlider绘制的工具提示的位置?默认情况下,它会将第一个放置在滑块上,将第二个放置在下面。我理解这里的可用性目标,但我想把两者都放在上面或下面。
示例(上面和下面都有工具提示):http://jsfiddle.net/leongersen/z83oz9np/2/
noUiSlider.create(div, {
start: [0, 50], // 2 handles
range: {
'min': 0,
'max': 50
},
tooltips: true // 2 tooltips but how to position?
});
我认为没有指定标签位置的选项。在你使用的css版本中有
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
bottom:-32px
}
您可以将其覆盖为与其他标签相同:
.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
top: -32px;
bottom: initial;
}
查看您更新的小提琴:http://jsfiddle.net/z83oz9np/20/
我觉得这是在这里做的最好的事情。在github的最新版本中,我注意到这个样式丢失了,所以如果你更新它,请考虑到这一点。
您可以覆盖css类".noUi-horizontal.noUi工具提示"中的属性"bottom"例如,要执行工具提示,请转到滑块下方:
.noUi-horizontal .noUi-tooltip {bottom: -130%;}
对于其他发现自己在这里的人,这将为你提供比负像素定位更一致的定位:
.noUi-vertical .noUi-handle-upper .noUi-tooltip {
right: unset;
left: 120%;
}
这去除了权利:120%;并将其相对于左侧重新定位,就像底部工具提示一样。
对我来说,这个解决方案都不起作用,所以我最终得到了自己的:
.noUi-horizontal .noUi-tooltip
{
left: unset !important;
}
.noUi-target
{
direction: unset !important;
}
完成。