fix(tooltip): Correct interaction on mobile

- Fix tooltip.show() to work
- Fix data point circle expansion
- Fix tooltip.init.show option to work
- Add touch event dispatcher

Fix #376
Close #377

spec/internals/tooltip-spec.js

@@ -76,9 +76,7 @@ describe("TOOLTIP", function() {
 		}
 	};
 
-
 	const checkCallback = (chart, doHide) => {
-
 		const eventRect = chart.internal.main
 			.select(`.${CLASS.eventRect}-2`)
 			.node();
@@ -101,7 +99,6 @@ describe("TOOLTIP", function() {
 	});
 
 	describe("Tooltip callbacks", () => {
-
 		before(() => {
 			args.tooltip.onshow = () => {
 				if (chart.internal.cache.callback_test === 0) {
@@ -139,7 +136,6 @@ describe("TOOLTIP", function() {
 			expect(test).to.be.equal(4);
 		});
 
-
 		describe("show/shown should execute in proper order", () => {
 			before(() => {
 				chart.internal.cache.callback_test = 0;
@@ -181,8 +177,6 @@ describe("TOOLTIP", function() {
 				expect(chart.internal.cache.callback_test2).to.be.equal(2);
 			});
 		});
-
-
 	});
 
 	describe("tooltip position", () => {
@@ -445,10 +439,6 @@ describe("TOOLTIP", function() {
 	});
 
 	describe("linked tooltip order", () => {
-		before(() => {
-
-		});
-
 		it("chart 1 should sort values in data display order", () => {
 			checkLinkedTooltip(chart, chart2, [
 				`${CLASS.tooltipName}-data1`,
@@ -594,4 +584,46 @@ describe("TOOLTIP", function() {
 			expect(args2.tooltip.order.called).to.be.true;
 		});
 	});
+
+	describe("tooltip display at initialization", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 50, 20, 10, 40, 15, 25],
+						["data3", 150, 120, 110, 140, 115, 125]
+					]
+				},
+				interaction: {
+					inputType: {
+						touch: true
+					}
+				},
+				tooltip: {
+					init: {
+						show: true,
+						x: 1,
+						position: {
+							left: "100px",
+							top: "30px"
+						}
+					}
+				}
+			};
+		});
+
+		it("tooltip should be displayed", () => {
+			const tooltip = chart.internal.tooltip;
+			const pos = {
+				left: tooltip.style("left"),
+				top: tooltip.style("top")
+			};
+
+			expect(tooltip.style("display")).to.be.equal("block");
+
+			expect(pos.left).to.be.equal(args.tooltip.init.position.left);
+			expect(pos.top).to.be.equal(args.tooltip.init.position.top);
+		});
+	});
 });

src/api/api.tooltip.js

@@ -19,7 +19,7 @@ const tooltip = extend(() => {}, {
 	 *    | Key | Type | Description |
 	 *    | --- | --- | --- |
 	 *    | index | Number | Determine focus by index |
-	 *    | x | Number|Date | Determine focus by x Axis index |
+	 *    | x | Number | Date | Determine focus by x Axis index |
 	 *    | data | Object | Determine focus data with following keys: `x` or `index`.<br>When [data.xs](Options.html#.data%25E2%2580%25A4xs) option is set, the target is determined by mouse position and needs specify `x`, `id` and `value`. |
 	 *    | mouse | Array | Determine x and y coordinate value relative the targeted x Axis element.<br>It should be used along with `data`, `index` or `x` value. The default value is set as `[0,0]` |
 	 *
@@ -70,8 +70,10 @@ const tooltip = extend(() => {}, {
 			index = args.index;
 		}
 
-		// emulate mouse events to show
-		["mouseover", "mousemove"].forEach(eventName => {
+		// emulate events to show
+		($$.inputType === "mouse" ?
+			["mouseover", "mousemove"] : ["touchstart"]
+		).forEach(eventName => {
 			$$.dispatchEvent(eventName, index, mouse);
 		});
 	},
@@ -87,6 +89,8 @@ const tooltip = extend(() => {}, {
 
 		$$.hideTooltip();
 		$$.hideXGridFocus();
+		$$.unexpandCircles();
+		$$.unexpandBars();
 	}
 });
 

src/data/data.js

@@ -120,6 +120,13 @@ extend(ChartInternal.prototype, {
 		return data;
 	},
 
+	getAllValuesOnIndex(index) {
+		const $$ = this;
+
+		return $$.filterTargetsToShow($$.data.targets)
+			.map(t => $$.addName($$.getValueOnIndex(t.values, index)));
+	},
+
 	getValueOnIndex(values, index) {
 		const valueOnIndex = values.filter(v => v.index === index);