Joining overlapping tooltips

[omuryildirim]

Goal: join and display single tooltip whenever two tooltips overlaps.

Solution: Catch overlapping tooltips by calculating their start and end points in x coordinate. Then add a new tooltip to the handle on the right side. Add a margin-left to adjust it to middle of two handles. Finally, make overlapping tooltips invisible.

Hope this fix helps everyone in need of it. Thanks for your contributions with noUiSlider.

[jasongrout]

FYI, ion slider (used by R shiny) has a nice polished UX for this. If the tooltips would overlap, they join into a single tooltip:

[jbarradas]

Is anyone working on this? Just ran into this issue.

[leongersen]

The documentation now has an example for merging overlapping tooltips. Thanks for contributing, everyone!

[bjarnef]

@leongersen thanks, it seems to work great! 👍

When e.g. the two handles have same value, would it be possible to merge these to a single tooltip value?

Examples from Ion.RangeSlider

Handles with different values

Handles with same value

[jasongrout]

Thanks! This example goes a long ways to making the slider more user friendly. It does seem to have some glitches in some cases, for example when I set the sliders to have 47.85, 50, 65.42, 73.60, and 73.60:

[leongersen]

@bjarnef Yes, you could extend the line poolValues[poolIndex].join(separator); in the example by filtering it for unique values.

@jasongrout You could slightly increase the threshold passed to the mergeTooltips function in the example,. e.g. to 20.

[bjarnef]

@leongersen thanks, it seems to work perfect!

I modfied these lines.

var tooltipValues = poolValues[poolIndex].filter((v, i, a) => a.indexOf(v) === i); 

// Center this tooltip over the affected handles
tooltips[handleNumber].innerHTML = tooltipValues.join(separator);

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.