fix(interaction): Fix wrong tooltip event coordinate

Chart dimension can be updated dynamically.
Having this possibility, the new event <rect> event handling based on the
<rect> coordinate, need to be get updated to reflect current dimension.

For this, run <rect> coord update when mouseover/touchstart event is triggered.

Fix #1695
Ref #1642

src/ChartInternal/interactions/eventrect.ts

@@ -139,6 +139,7 @@ export default {
 
 		// bind touch events
 		eventRect
+			.on("touchstart", () => $$.updateEventRect())
 			.on("touchstart.eventRect touchmove.eventRect", () => {
 				const event = d3Event;
 
@@ -171,15 +172,18 @@ export default {
 		});
 	},
 
-	updateEventRect(eventRect): void {
+	updateEventRect(eventRect?): void {
 		const $$ = this;
-		const {eventReceiver, width, height, rendered, resizing} = $$.state;
+		const {state, $el} = $$;
+		const {eventReceiver, width, height, rendered, resizing} = state;
 
-		if (!rendered || resizing) {
-			const updateClientRect = (): void => {
-				eventReceiver && (eventReceiver.rect = eventRect.node().getBoundingClientRect());
-			};
+		const updateClientRect = (): void => {
+			eventReceiver && (
+				eventReceiver.rect = (eventRect || $el.eventRect).node().getBoundingClientRect()
+			);
+		};
 
+		if (!rendered || resizing) {
 			const rect = eventRect
 				.attr("x", 0)
 				.attr("y", 0)
@@ -188,18 +192,11 @@ export default {
 
 			// only for init
 			if (!rendered) {
-				rect
-					.attr("class", CLASS.eventRect)
-					.on("click", function() {
-						$$.clickHandlerForMultipleXS.bind(this)($$);
-					});
-
-				// to make evaluate after the page elements are settled within page
-				setTimeout(updateClientRect, 0);
+				rect.attr("class", CLASS.eventRect);
 			}
-
-			updateClientRect();
 		}
+
+		updateClientRect();
 	},
 
 	/**
@@ -392,6 +389,7 @@ export default {
 			};
 
 			rect
+				.on("mouseover", () => $$.updateEventRect())
 				.on("mousemove", function() {
 					const d = getData();
 

test/internals/tooltip-spec.ts

@@ -1142,4 +1142,48 @@ describe("TOOLTIP", function() {
 			});
 		});
 	});
+
+	describe("tooltip display: after dynamic dimension update", () => {
+		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
+				}
+			}
+		});
+
+		it("Rotated Axis: should tooltip show correctly", () => {
+			// when
+			chart.$.chart.style("margin-top", "100px");
+			chart.tooltip.show({index:1});
+
+			expect(chart.$.tooltip.select("th").text()).to.be.equal("0");
+
+			chart.$.chart.style("margin-top", null);
+		});
+
+		it("set options: axis.rotated=false", () => {
+			args.axis.rotated = false;
+		});
+
+		it("Non-rotated Axis: should tooltip show correctly", () => {
+			// when
+			chart.$.chart.style("margin-left", "100px");
+			chart.tooltip.show({index:1});
+
+			expect(chart.$.tooltip.select("th").text()).to.be.equal("1");
+
+			chart.$.chart.style("margin-left", null);
+		});
+	});
 });