fix(tooltip): Fix tooltip position on overlapping data point

Adjust tooltip position for rightest positioned data points to not overlap data points. Fix #1267
naver · Mar 3, 2020 · 8dba213 · 8dba213
1 parent 1650955
commit 8dba213
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 8 deletions.
diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -198,6 +198,42 @@ describe("TOOLTIP", function() {
 			});
 		});
 
+		describe("do not overlap data point", () => {
+			it("should show tooltip on proper position", done => {
+				const tooltip = chart.$.tooltip;
+				const circles = chart.$.line.circles;
+				const getCircleRectX = x => circles.filter(`.${CLASS.shape}-${x}`)
+					.node().getBoundingClientRect().x;
+
+				// when
+				let x = 8;
+				chart.tooltip.show({x});
+
+				// tooltip should locate on the right side of data point
+				expect(
+					util.parseNum(tooltip.style("left")) + util.parseNum(tooltip.style("width"))
+				).to.be.above(getCircleRectX(3));
+
+				// when
+				x = 10;
+				chart.tooltip.show({x});
+
+				// tooltip should locate on the left side of data point
+				expect(
+					util.parseNum(tooltip.style("left")) + util.parseNum(tooltip.style("width"))
+				).to.be.below(getCircleRectX(4));
+
+				// when
+				x = 12;
+				chart.tooltip.show({x});
+
+				// tooltip should locate on the left side of data point
+				expect(
+					util.parseNum(tooltip.style("left")) + util.parseNum(tooltip.style("width"))
+				).to.be.below(getCircleRectX(5));
+			});
+		});
+
 		describe("when zoomed", () => {
 			before(() => {
 				args.zoom = {enabled: true};

diff --git a/src/internals/tooltip.js b/src/internals/tooltip.js
@@ -235,8 +235,10 @@ extend(ChartInternal.prototype, {
 		const svgLeft = $$.getSvgLeft(true);
 		let [left, top] = d3Mouse(element);
 		let chartRight = svgLeft + $$.currentWidth - $$.getCurrentPaddingRight();
+		const chartLeft = $$.getCurrentPaddingLeft(true);
+		const size = 20;
 
-		top += 20;
+		top += size;
 
 		// Determine tooltip position
 		if ($$.hasArcType()) {
@@ -250,20 +252,18 @@ extend(ChartInternal.prototype, {
 			const dataScale = $$.x(dataToShow[0].x);
 
 			if (config.axis_rotated) {
-				top = dataScale + 20;
+				top = dataScale + size;
 				left += svgLeft + 100;
 				chartRight -= svgLeft;
 			} else {
 				top -= 5;
-				left = svgLeft + $$.getCurrentPaddingLeft(true) + 20 + ($$.zoomScale ? left : dataScale);
+				left = svgLeft + chartLeft + size + ($$.zoomScale ? left : dataScale);
 			}
 		}
 
-		const right = left + tWidth;
-
-		if (right > chartRight) {
-			// 20 is needed for Firefox to keep tooltip width
-			left -= right - chartRight + 20;
+		// when tooltip left + tWidth > chart's width
+		if ((left + tWidth + 15) > chartRight) {
+			left -= (svgLeft + tWidth + chartLeft);
 		}
 
 		if (top + tHeight > $$.currentHeight) {