feat(tooltip): Intent to ship tooltip.doNotHide

Implement to not hide on user interaction, but it hides when .hide() is called Fix #812
naver · Mar 22, 2019 · 81e2f09 · 81e2f09
1 parent 4d34ce7
commit 81e2f09
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 7 deletions.
diff --git a/spec/internals/tooltip-spec.js b/spec/internals/tooltip-spec.js
@@ -708,4 +708,31 @@ describe("TOOLTIP", function() {
 			}, 500);
 		});
 	});
+
+	describe("tooltip display", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100],
+						["data2", 130, 100, 140]
+					]
+				},
+				tooltip: {
+					doNotHide: true
+				}
+			};
+		});
+
+		it("tooltip shouldn't be hiding", () => {
+			util.hoverChart(chart, "mousemove", {clientX: 185, clientY: 107});
+			util.hoverChart(chart, "mouseout", {clientX: -100, clientY: -100});
+
+			expect(chart.$.tooltip.style("display")).to.be.equal("block");
+
+			// when is called .hide(), it should be hide
+			chart.tooltip.hide();
+			expect(chart.$.tooltip.style("display")).to.be.equal("none");
+		});
+	});
 });
diff --git a/src/api/api.tooltip.js b/src/api/api.tooltip.js
@@ -106,7 +106,7 @@ const tooltip = extend(() => {}, {
 	hide: function() {
 		const $$ = this.internal;
 
-		$$.hideTooltip();
+		$$.hideTooltip(true);
 		$$.hideXGridFocus();
 		$$.unexpandCircles();
 		$$.unexpandBars();

diff --git a/src/config/Options.js b/src/config/Options.js
@@ -3196,7 +3196,8 @@ export default class Options {
 			 * @name tooltip
 			 * @memberof Options
 			 * @type {Object}
-			 * @property {Boolean} [tooltip.show=true] Show or hide tooltip.<br>
+			 * @property {Boolean} [tooltip.show=true] Show or hide tooltip.
+			 * @property {Boolean} [tooltip.doNotHide=false] Make tooltip keep showing not hiding on interaction.
 			 * @property {Boolean} [tooltip.grouped=true] Set if tooltip is grouped or not for the data points.
 			 *   - **NOTE:** The overlapped data points will be displayed as grouped even if set false.
 			 * @property {Boolean} [tooltip.linked=false] Set if tooltips on all visible charts with like x points are shown together when one is shown.
@@ -3230,6 +3231,7 @@ export default class Options {
 			 * @example
 			 *  tooltip: {
 			 *      show: true,
+			 *      doNotHide: true,
 			 *      grouped: false,
 			 *      format: {
 			 *          title: function(x) { return "Data " + x; },
@@ -3283,6 +3285,7 @@ export default class Options {
 			 *  }
 			 */
 			tooltip_show: true,
+			tooltip_doNotHide: false,
 			tooltip_grouped: true,
 			tooltip_format_title: undefined,
 			tooltip_format_name: undefined,

diff --git a/src/internals/tooltip.js b/src/internals/tooltip.js
@@ -269,18 +269,21 @@ extend(ChartInternal.prototype, {
 
 	/**
 	 * Hide the tooltip
+	 * @param {Boolean} force Force to hide
 	 * @private
 	 */
-	hideTooltip() {
+	hideTooltip(force) {
 		const $$ = this;
 		const config = $$.config;
 
-		callFn(config.tooltip_onhide, $$);
+		if (!config.tooltip_doNotHide || force) {
+			callFn(config.tooltip_onhide, $$);
 
-		// hide tooltip
-		this.tooltip.style("display", "none").datum(null);
+			// hide tooltip
+			this.tooltip.style("display", "none").datum(null);
 
-		callFn(config.tooltip_onhidden, $$);
+			callFn(config.tooltip_onhidden, $$);
+		}
 	},
 
 	/**

diff --git a/types/options.d.ts b/types/options.d.ts
@@ -677,6 +677,11 @@ export interface TooltipOptions {
 	 */
 	show?: boolean;
 
+	/**
+	 * Make tooltip keep showing not hiding on interaction.
+	 */
+	doNotHide?: boolean;
+
 	/**
 	 * Set if tooltip is grouped or not for the data points.
 	 */