CODEWITHSUNDEEP
nouislider
Chris Moschini
Chris Moschini

Reputation: 37957

noUiSlider - Place Both Tooltips above Slider?

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?
});

Upvotes: 5

Views: 8847

Answers (4)

SelectedVertex
SelectedVertex

Reputation: 23

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.

Upvotes: 0

Arkade
Arkade

Reputation: 31

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%;}

Upvotes: 3

impavidum
impavidum

Reputation: 1

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.

Upvotes: 0

sourcx
sourcx

Reputation: 974

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.

Upvotes: 8

Related Questions