noUiSlider - Place Both Tooltips above Slider?

Question

Is it possible to specify the position of the tooltips that noUiSlider draws? It appears that by default it places the first one over the slider, and the second below. I understand the usability goal here, but I'd like to put both above or below.

Example (with tooltips above and below): 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?
});

Zaria

Answer 1

I don't believe there is an option to specify the position of the labels. In the css version you're using there's

.noUi-horizontal .noUi-handle-upper .noUi-tooltip { 
  bottom:-32px 
}

Which you can override to be the same as the other label:

  .noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    top: -32px;
    bottom: initial;
  }

See your updated fiddle: http://jsfiddle.net/z83oz9np/20/

Think that's the best thing to do here. In the latest version on github I've noted this styling is missing, so take this into account if you ever update it.

Falgoust

Answer 2

You can overwrite the attribute "bottom" from the css class ".noUi-horizontal .noUi-tooltip" for example to do the tooltip go below the slider:

.noUi-horizontal .noUi-tooltip  {bottom: -130%;}

Hobnob

Answer 3

For others that find themselves here, this will give you more consistent positioning than negative pixel positioning:

.noUi-vertical .noUi-handle-upper .noUi-tooltip {
    right: unset;
    left: 120%;
}

This removes the right: 120%; from the tooltip and repositions it with respect to the left, like the bottom tooltip.

Mina

Answer 4

for me none of this solution worked so I ended up with my own:

.noUi-horizontal .noUi-tooltip 
{
  left: unset !important;
}

.noUi-target 
{
  direction: unset !important;
}

done.

Dislocation