fix(core): Fix tooltip positioning

carbon-design-system · May 3, 2019 · dd17048 · dd17048
1 parent 155436c
commit dd17048
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 259 deletions.
diff --git a/packages/core/demo/demo-data/pie-donut.ts b/packages/core/demo/demo-data/pie-donut.ts
@@ -19,8 +19,8 @@ export const donutOptions = {
 };
 
 export const pieData = {
-	labels: ["2V2N-9KYPM version 1", "L22I-P66EP-L22I-P66EP-L22I-P66EP", "JQAI-2M4L1", "J9DZ-F37AP",
-		"YEL48-Q6XK-YEL48", "P66EP-L22I-L22I", "Q6XK-YEL48", "XKB5-L6EP", "YEL48-Q6XK", "L22I-P66EP-L22I"],
+	labels: ["2V2N 9KYPM version 1", "L22I P66EP L22I P66EP L22I P66EP", "JQAI 2M4L1", "J9DZ F37AP",
+		"YEL48 Q6XK YEL48", "P66EP L22I L22I", "Q6XK YEL48", "XKB5 L6EP", "YEL48 Q6XK", "L22I P66EP L22I"],
 	datasets: [
 		{
 			label: "Dataset 1",

diff --git a/packages/core/demo/index.scss b/packages/core/demo/index.scss
@@ -145,7 +145,7 @@ header.m-demo-header {
 	display: block;
 	height: 500px;
 	min-width: 300px;
-	max-width: 510px;
+	max-width: 800px;
 	padding: 30px;
 	transition: box-shadow .1s ease-out;
 	overflow: hidden;

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -23,7 +23,7 @@
   "author": "IBM",
   "license": "Apache-2.0",
   "dependencies": {
-    "@carbon/utils-position": "1.0.0",
+    "@carbon/utils-position": "1.1.0",
     "babel-polyfill": "6.26.0",
     "d3": "4.13.0",
     "resize-observer-polyfill": "1.5.0"

diff --git a/packages/core/src/base-chart.ts b/packages/core/src/base-chart.ts
@@ -75,7 +75,7 @@ export class BaseChart {
 
 		// Initialize charting components
 		this.chartOverlay = new ChartOverlay(this.holder, this.options.overlay);
-		this.tooltip = new ChartTooltip(this.holder);
+		this.tooltip = new ChartTooltip(this.container.node());
 
 		if (configs.data) {
 			this.setData(configs.data);

diff --git a/packages/core/src/components/positionService.ts b/packages/core/src/components/positionService.ts
diff --git a/packages/core/src/components/tooltip.ts b/packages/core/src/components/tooltip.ts
@@ -1,38 +1,40 @@
 import * as Configuration from "../configuration";
 
 // Carbon position service
-// import Position, { position } from "@carbon/utils-position";
-import Position, { PLACEMENTS } from "./positionService";
+import Position, { PLACEMENTS } from "@carbon/utils-position";
 
 // D3 Imports
 import { select, selectAll, mouse } from "d3-selection";
 
 export class ChartTooltip {
-	holder: Element;
+	container: Element;
 	positionService: Position = new Position();
 
-	constructor(holder: Element) {
-		this.holder = holder;
+	constructor(container: Element) {
+		this.container = container;
 	}
 
-	getRef = () => select(this.holder).select("div.chart-tooltip").node() as HTMLElement;
+	getRef = () => select(this.container).select("div.chart-tooltip").node() as HTMLElement;
 
 	positionTooltip() {
 		const target = this.getRef();
-		const mouseRelativePos = mouse(this.holder as SVGSVGElement);
+		const mouseRelativePos = mouse(this.container as SVGSVGElement);
 
 		// Find out whether tooltip should be shown on the left or right side
 		const bestPlacementOption = this.positionService.findBestPlacementAt(
 			{
 				left: mouseRelativePos[0],
 				top: mouseRelativePos[1]
 			},
-			this.holder,
 			target,
 			[
 				PLACEMENTS.RIGHT,
 				PLACEMENTS.LEFT
-			]
+			],
+			() => ({
+				width: (this.container as HTMLElement).offsetWidth,
+				height: (this.container as HTMLElement).offsetHeight
+			})
 		);
 
 		// Get coordinates to where tooltip should be positioned
@@ -54,7 +56,7 @@ export class ChartTooltip {
 		selectAll(".chart-tooltip").remove();
 
 		// Draw tooltip
-		const tooltip = select(this.holder).append("div")
+		const tooltip = select(this.container).append("div")
 			.attr("class", "tooltip chart-tooltip");
 
 		// Apply html content to the tooltip
@@ -75,7 +77,7 @@ export class ChartTooltip {
 	}
 
 	hide() {
-		const tooltipRef = select(this.holder).select("div.chart-tooltip");
+		const tooltipRef = select(this.container).select("div.chart-tooltip");
 
 		// Fade out and remove
 		tooltipRef.style("opacity", 1)
@@ -104,7 +106,7 @@ export class ChartTooltip {
 	}
 
 	addEventListeners() {
-		const tooltipRef = select(this.holder).select("div.chart-tooltip");
+		const tooltipRef = select(this.container).select("div.chart-tooltip");
 
 		// Apply the event listeners to close the tooltip
 		// setTimeout is there to avoid catching the click event that opened the tooltip
@@ -113,7 +115,7 @@ export class ChartTooltip {
 			window.addEventListener("keydown", this.handleTooltipEvents);
 
 			// If clicked outside
-			this.holder.addEventListener("click", this.handleTooltipEvents);
+			this.container.addEventListener("click", this.handleTooltipEvents);
 
 			// Stop clicking inside tooltip from bubbling up to window
 			tooltipRef.on("click", () => {
@@ -127,6 +129,6 @@ export class ChartTooltip {
 		window.removeEventListener("keydown", this.handleTooltipEvents);
 
 		// Remove eventlistener to close tooltip when clicked outside
-		this.holder.removeEventListener("click", this.handleTooltipEvents);
+		this.container.removeEventListener("click", this.handleTooltipEvents);
 	}
 }
diff --git a/packages/core/src/configuration.ts b/packages/core/src/configuration.ts
@@ -692,7 +692,7 @@ export const tooltip = {
 	magicTop1: 21,
 	magicTop2: 22,
 	magicLeft1: 11,
-	magicLeft2: 12,
+	magicLeft2: 10,
 	fadeIn: {
 		duration: 250
 	},

diff --git a/packages/core/src/style.scss b/packages/core/src/style.scss
@@ -256,8 +256,8 @@ div.chart-overlay {
 	position: absolute;
 	padding: 10px;
 	border-radius: 3px;
-	min-width: 110px;
-	max-width: 200px;
+	min-width: 80px;
+	max-width: 70%;
 	word-wrap: break-word;
 	z-index: 1059;