diff --git a/documentation/_run/index.php b/documentation/_run/index.php
index 538c1c24..1b80418a 100644
--- a/documentation/_run/index.php
+++ b/documentation/_run/index.php
@@ -10,7 +10,7 @@
-
+
diff --git a/documentation/assets/base.css b/documentation/assets/base.css
index 8401b43e..9ceb36b9 100644
--- a/documentation/assets/base.css
+++ b/documentation/assets/base.css
@@ -120,7 +120,7 @@
content: "";
}
.viewer-header.open + .viewer-content {
- max-height: 2000px;
+ max-height: 2500px;
}
.options {
diff --git a/documentation/examples-content/merging-tooltips.php b/documentation/examples-content/merging-tooltips.php
new file mode 100644
index 00000000..a31053c3
--- /dev/null
+++ b/documentation/examples-content/merging-tooltips.php
@@ -0,0 +1,29 @@
+
+
Merging overlapping tooltips
+
+
+
+
+
Issue #1032 asks to merge overlapping tooltips. As this feature is outside the scope of the tooltips-feature in noUiSlider, this example can be used to implement this feature using the event system.
+
+
+
+
+
+
diff --git a/documentation/examples.php b/documentation/examples.php
index b28efe8b..be4f2438 100644
--- a/documentation/examples.php
+++ b/documentation/examples.php
@@ -6,8 +6,9 @@
- Color Picker
+ Color picker
Using dates
+ Merging overlapping tooltips
Working with HTML5 input types
Using non linear ranges
Locking two sliders together
@@ -29,6 +30,7 @@
+
diff --git a/documentation/examples/merging-tooltips-slider.js b/documentation/examples/merging-tooltips-slider.js
new file mode 100644
index 00000000..cf67ad92
--- /dev/null
+++ b/documentation/examples/merging-tooltips-slider.js
@@ -0,0 +1,13 @@
+var mergingTooltipSlider = document.getElementById('merging-tooltips');
+
+noUiSlider.create(mergingTooltipSlider, {
+ start: [20, 32, 50, 70, 80, 90],
+ connect: true,
+ tooltips: [false, true, true, true, true, true],
+ range: {
+ 'min': 0,
+ 'max': 100
+ }
+});
+
+mergeTooltips(mergingTooltipSlider, 15, ' - ');
diff --git a/documentation/examples/merging-tooltips.js b/documentation/examples/merging-tooltips.js
new file mode 100644
index 00000000..8349767b
--- /dev/null
+++ b/documentation/examples/merging-tooltips.js
@@ -0,0 +1,79 @@
+/**
+ * @param slider HtmlElement with an initialized slider
+ * @param threshold Minimum proximity (in percentages) to merge tooltips
+ * @param separator String joining tooltips
+ */
+function mergeTooltips(slider, threshold, separator) {
+
+ var textIsRtl = getComputedStyle(slider).direction === 'rtl';
+ var isRtl = slider.noUiSlider.options.direction === 'rtl';
+ var isVertical = slider.noUiSlider.options.orientation === 'vertical';
+ var tooltips = slider.noUiSlider.getTooltips();
+ var origins = slider.noUiSlider.getOrigins();
+
+ // Move tooltips into the origin element. The default stylesheet handles this.
+ tooltips.forEach(function (tooltip, index) {
+ if (tooltip) {
+ origins[index].appendChild(tooltip);
+ }
+ });
+
+ slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
+
+ var pools = [[]];
+ var poolPositions = [[]];
+ var poolValues = [[]];
+ var atPool = 0;
+
+ // Assign the first tooltip to the first pool, if the tooltip is configured
+ if (tooltips[0]) {
+ pools[0][0] = 0;
+ poolPositions[0][0] = positions[0];
+ poolValues[0][0] = values[0];
+ }
+
+ for (var i = 1; i < positions.length; i++) {
+ if (!tooltips[i] || (positions[i] - positions[i - 1]) > threshold) {
+ atPool++;
+ pools[atPool] = [];
+ poolValues[atPool] = [];
+ poolPositions[atPool] = [];
+ }
+
+ if (tooltips[i]) {
+ pools[atPool].push(i);
+ poolValues[atPool].push(values[i]);
+ poolPositions[atPool].push(positions[i]);
+ }
+ }
+
+ pools.forEach(function (pool, poolIndex) {
+ var handlesInPool = pool.length;
+
+ for (var j = 0; j < handlesInPool; j++) {
+ var handleNumber = pool[j];
+
+ if (j === handlesInPool - 1) {
+ var offset = 0;
+
+ poolPositions[poolIndex].forEach(function (value) {
+ offset += 1000 - 10 * value;
+ });
+
+ var direction = isVertical ? 'bottom' : 'right';
+ var last = isRtl ? 0 : handlesInPool - 1;
+ var lastOffset = 1000 - 10 * poolPositions[poolIndex][last];
+ offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
+
+ // Center this tooltip over the affected handles
+ tooltips[handleNumber].innerHTML = poolValues[poolIndex].join(separator);
+ tooltips[handleNumber].style.display = 'block';
+ tooltips[handleNumber].style[direction] = offset + '%';
+ } else {
+ // Hide this tooltip
+ tooltips[handleNumber].style.display = 'none';
+ }
+ }
+ });
+ });
+}
diff --git a/documentation/slider-options.php b/documentation/slider-options.php
index 8a968371..f3331b66 100644
--- a/documentation/slider-options.php
+++ b/documentation/slider-options.php
@@ -358,6 +358,8 @@
Tooltips can be removed from a slider using the removeTooltips()
method.
+ To merge overlapping tooltips, refer to this example .
+