fix(interaction): Correct mouse event create (#252)

- Use MouseEvent to create whenever is supported.
- Added params description for .tooltip.show()

Fix #251
Close #252

src/api/api.tooltip.js

@@ -14,9 +14,16 @@ const tooltip = extend(() => {}, {
 	 * @method tooltip․show
 	 * @instance
 	 * @memberOf Chart
-	 * @param {Array} args
+	 * @param {Object} args The object can consist with following members:<br>
+	 *
+	 *    | Key | Type | Description |
+	 *    | --- | --- | --- |
+	 *    | data | Object | Determine focus data with following keys: `x`, `id`, `value` and `index` |
+	 *    | index | Number | Determine focus by index |
+	 *    | mouse | Array | Determine x and y coordinate value |
+	 *    | x | Number | Determine focus by x Axis index |
 	 */
-	show: function(args) {
+	show: function(args = {}) {
 		const $$ = this.internal;
 		let index;
 		let mouse;
@@ -47,8 +54,9 @@ const tooltip = extend(() => {}, {
 		}
 
 		// emulate mouse events to show
-		$$.dispatchEvent("mouseover", index, mouse);
-		$$.dispatchEvent("mousemove", index, mouse);
+		["mouseover", "mousemove"].forEach(eventName => {
+			$$.dispatchEvent(eventName, index, mouse);
+		});
 
 		$$.config.tooltip_onshow.call($$, args.data);
 	},

src/interactions/interaction.js

@@ -12,6 +12,43 @@ import ChartInternal from "../internals/ChartInternal";
 import CLASS from "../config/classes";
 import {extend, isBoolean} from "../internals/util";
 
+// Get mouse event
+let getMouseEvent = () => {
+	const getParams = () => ({
+		bubbles: false, cancelable: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0
+	});
+
+	try {
+		// eslint-disable-next-line no-new
+		new MouseEvent("t");
+		getMouseEvent = () => (eventType, params = getParams()) => new MouseEvent(eventType, params);
+	} catch (e) {
+		// Polyfills DOM4 MouseEvent
+		getMouseEvent = () => (
+			eventType,
+			params = getParams()
+		) => {
+			const mouseEvent = document.createEvent("MouseEvent");
+
+			// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/initMouseEvent
+			mouseEvent.initMouseEvent(
+				eventType,
+				params.bubbles,
+				params.cancelable,
+				window,
+				0, // the event's mouse click count
+				params.screenX, params.screenY,
+				params.clientX, params.clientY,
+				false, false, false, false, 0, null
+			);
+
+			return mouseEvent;
+		};
+	}
+
+	return getMouseEvent();
+};
+
 extend(ChartInternal.prototype, {
 	/**
 	 * Initialize the area that detects the event.
@@ -555,25 +592,29 @@ extend(ChartInternal.prototype, {
 	},
 
 	/**
-	 * Dispatch an event.
+	 * Dispatch a mouse event.
 	 * @private
 	 * @param {String} type event type
 	 * @param {Number} index Index of eventRect
-	 * @param {Object} mouse Object
+	 * @param {Array} mouse x and y coordinate value
 	 */
 	dispatchEvent(type, index, mouse) {
 		const $$ = this;
-		const selector = $$.isMultipleX() ?
-			`.${CLASS.eventRect}` : `${CLASS.eventRect}-${index}`;
+		const selector = `.${
+			$$.isMultipleX() ? CLASS.eventRect : `${CLASS.eventRect}-${index}`
+		}`;
 
 		const eventRect = $$.main.select(selector).node();
 		const box = eventRect.getBoundingClientRect();
 		const x = box.left + (mouse ? mouse[0] : 0);
 		const y = box.top + (mouse ? mouse[1] : 0);
-
-		const event = document.createEvent("MouseEvents")
-			.initMouseEvent(type, true, true, window, 0, x, y, x, y, false, false, false, false, 0, null);
-
-		eventRect.dispatchEvent(event);
+		const mouseEvent = getMouseEvent();
+
+		eventRect.dispatchEvent(mouseEvent(type, {
+			screenX: x,
+			screenY: y,
+			clientX: x,
+			clientY: y
+		}));
 	}
 });