fix(tooltip): Fix tooltip overflow when right side edge is hovered

- Adjust left position value - Add 'white-space: nowrap;' to prevent line break Fix #3254
naver · Jun 15, 2023 · 9ce900d · 9ce900d
1 parent 60c706d
commit 9ce900d
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 6 deletions.
diff --git a/src/ChartInternal/internals/tooltip.ts b/src/ChartInternal/internals/tooltip.ts
@@ -273,6 +273,7 @@ export default {
 		const {width, height, current, isLegendRight, inputType, event} = state;
 		const hasGauge = $$.hasType("gauge") && !config.gauge_fullCircle;
 		const hasTreemap = state.hasTreemap;
+		const isRotated = config.axis_rotated;
 		const svgLeft = $$.getSvgLeft(true);
 		let chartRight = svgLeft + current.width - $$.getCurrentPaddingRight();
 		const chartLeft = $$.getCurrentPaddingLeft(true);
@@ -290,9 +291,9 @@ export default {
 		} else if (!hasTreemap) {
 			const dataScale = scale.x(dataToShow[0].x);
 
-			if (config.axis_rotated) {
+			if (isRotated) {
 				y = dataScale + size;
-				x += svgLeft + 100;
+				x += svgLeft;
 				chartRight -= svgLeft;
 			} else {
 				y -= 5;
@@ -302,7 +303,7 @@ export default {
 
 		// when tooltip left + tWidth > chart's width
 		if ((x + tWidth + 15) > chartRight) {
-			x -= tWidth + (hasTreemap ? 0 : chartLeft);
+			x -= isRotated ? tWidth - chartLeft : tWidth + (hasTreemap ? 0 : chartLeft);
 		}
 
 		if (y + tHeight > current.height) {

diff --git a/src/scss/billboard.scss b/src/scss/billboard.scss
@@ -190,9 +190,8 @@
 	background-color:#fff;
 	empty-cells:show;
 	opacity: 0.9;
-	-webkit-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
-	-moz-box-shadow: 7px 7px 12px -9px rgb(119,119,119);
 	box-shadow: 7px 7px 12px -9px rgb(119,119,119);
+	white-space: nowrap;
 
 	tr {
 		border:1px solid #CCC;

diff --git a/src/scss/theme/dark.scss b/src/scss/theme/dark.scss
@@ -236,6 +236,7 @@ rect.bb-circle, use.bb-circle {
     text-align: left;
     font-size: 11px;
     color: #fff;
+    white-space: nowrap;
 
     th {
         font-size:12px;

diff --git a/src/scss/theme/datalab.scss b/src/scss/theme/datalab.scss
@@ -218,6 +218,7 @@ $text-font-size: 11px;
     text-align: left;
     font-size: 11px;
     -webkit-font-smoothing: antialiased;
+    white-space: nowrap;
 
     th {
         font-size: 13px;

diff --git a/src/scss/theme/graph.scss b/src/scss/theme/graph.scss
@@ -228,6 +228,7 @@ rect.bb-circle, use.bb-circle {
     text-align: left;
     font-size: 12px;
     box-shadow: .5px .5px 1px #999;
+    white-space: nowrap;
 
     th {
         font-size: 12px;

diff --git a/src/scss/theme/insight.scss b/src/scss/theme/insight.scss
@@ -217,6 +217,7 @@ rect.bb-circle, use.bb-circle {
     background-color: #fff;
     text-align: left;
     font-size: 11px;
+    white-space: nowrap;
 
     th {
         font-size:12px;

diff --git a/test/internals/tooltip-spec.ts b/test/internals/tooltip-spec.ts
@@ -310,7 +310,7 @@ describe("TOOLTIP", function() {
 		});
 
 		describe("do not overlap data point", () => {
-			it("should show tooltip on proper position", done => {
+			it("should show tooltip on proper position", () => {
 				const tooltip = chart.$.tooltip;
 				const circles = chart.$.circles;
 				const getCircleRectX = x => circles.filter(`.${$SHAPE.shape}-${x}`)
@@ -612,6 +612,59 @@ describe("TOOLTIP", function() {
 
 		});
 
+		describe("on rotated axis", () => {
+			before(() => {
+				args = {
+					data: {
+					  columns: [
+						["Male", -83, -143, -100, -120, -150, -85],
+						["Female", 130, 100, 140, 175, 150, 50]
+					  ],
+					  type: "bar",
+					  groups: [
+						["Male", "Female"]
+					  ],
+					},
+					axis: {
+						rotated: true,
+						x: {
+							show: false
+						}
+					},
+					grid: {
+						y: {
+							show: true,
+							lines: [
+							{
+								value: 0,
+								class: "base-line"
+							}
+							]
+						}
+					}
+				};
+			});
+
+			it("tooltip shoudn't overflow the chart", () => {
+				const {state} = chart.internal;
+
+				util.hoverChart(chart, "mousemove", {
+					clientX: 628,
+					clientY: 317
+				});
+
+				const tooltip = chart.$.tooltip;
+				const {offsetWidth, offsetHeight} = tooltip.node();
+				const tooltipLeft = util.parseNum(tooltip.style("left")) + offsetWidth;
+
+				// check for tooltip text line break
+				expect(offsetHeight).to.be.lessThan(70);
+
+				// check for tooltip position to not overflow the chart
+				expect(tooltipLeft).to.be.lessThanOrEqual(state.width);				
+			});
+		});
+
 		describe("Narrow width container's tooltip position", () => {
 			const orgArgs = args;