feat(bar): pass default tooltip to customHTML tooltip

carbon-design-system · Oct 28, 2019 · b6f519b · b6f519b
1 parent 7d1a026
commit b6f519b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/core/src/components/essentials/tooltip-bar.ts b/packages/core/src/components/essentials/tooltip-bar.ts
@@ -31,23 +31,25 @@ export class TooltipBar extends Tooltip {
 
 				const hoveredElement = e.detail.hoveredElement.node();
 
-				// if there is a provided tooltip HTML function
-				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
-					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement));
-				} else if (e.detail.multidata) {
+				let defaultTooltip;
+				if (e.detail.multidata) {
 					// multi tooltip
-					tooltipTextContainer.html(this.getMultilineTooltipHTML(e.detail.multidata));
-					// Position the tooltip
-					this.positionTooltip();
+					defaultTooltip = this.getMultilineTooltipHTML(e.detail.multidata)
 				} else {
-					const data = e.detail.hoveredElement.datum();
-					tooltipTextContainer.html(this.getTooltipHTML(data));
-
-					const position = this.getTooltipPosition(hoveredElement);
+					defaultTooltip = this.getTooltipHTML(e.detail.hoveredElement.datum())
+				}
 
-					// Position the tooltip relative to the bars
-					this.positionTooltip(position);
+				// if there is a provided tooltip HTML function call it and pass the defaultTooltip
+				if (Tools.getProperty(this.model.getOptions(), "tooltip", "customHTML")) {
+					tooltipTextContainer.html(this.model.getOptions().tooltip.customHTML(hoveredElement, defaultTooltip));
+				} else {
+					// default tooltip
+					tooltipTextContainer.html(defaultTooltip);
 				}
+
+				const position = this.getTooltipPosition(hoveredElement);
+				// Position the tooltip relative to the bars
+				this.positionTooltip(e.detail.multidata ? undefined : position );
 				// Fade in
 				this.tooltip.classed("hidden", false);
 			}

diff --git a/packages/core/src/interfaces/components.ts b/packages/core/src/interfaces/components.ts
@@ -55,6 +55,7 @@ export interface TooltipOptions {
 	formatter?: Function;
 	/**
 	 * custom function for returning tooltip HTML
+	 * passed an array or object with the data, and then the default tooltip markup
 	 */
 	customHTML?: Function;
 	/**

diff --git a/packages/core/webpack.config.js b/packages/core/webpack.config.js
@@ -80,7 +80,7 @@ module.exports = {
 	devServer: {
 		contentBase: "./demo",
 		host: "0.0.0.0",
-		port: 9001,
+		port: process.env.PORT || 9001,
 		historyApiFallback: true,
 		disableHostCheck: true
 	}