Remove unnecessary logic for tooltips in Pie

packages/core/demo/demo-data/bar.ts

@@ -77,7 +77,7 @@ export const groupedBarOptions = {
 
 // Simple bar
 export const simpleBarData = {
-	labels: ["Qty", "More", "Sold", "Restocking", "Miscella Hello"],
+	labels: ["Qty", "More", "Sold", "Restocking", "Miscellaneous"],
 	datasets: [
 		{
 			label: "Dataset 1",

packages/core/src/bar-chart.ts

@@ -310,9 +310,7 @@ export class BarChart extends BaseAxisChart {
 				self.showTooltip(d, this);
 				self.reduceOpacity(this);
 			})
-			.on("mousemove", d => {
-				this.tooltip.positionTooltip();
-			})
+			.on("mousemove", d => this.tooltip.positionTooltip())
 			.on("mouseout", function(d) {
 				const { strokeWidth, strokeWidthAccessible } = Configuration.bars.mouseout;
 				select(this)

packages/core/src/base-chart.ts

@@ -824,16 +824,25 @@ export class BaseChart {
 		}
 	}
 
-	showTooltip(d, clickedElement) {
-		// Rest opacity of all elements in the chart
-		this.resetOpacity();
-
-		let contentHTML = "";
+	getTooltipHTML = d => {
 		const formattedValue = this.options.tooltip.formatter ? this.options.tooltip.formatter(d.value) : d.value.toLocaleString("en");
 		if (this.getLegendType() === Configuration.legend.basedOn.LABELS) {
-			contentHTML += this.generateTooltipHTML(d.label, formattedValue);
+			return this.generateTooltipHTML(d.label, formattedValue);
+		}
+
+		return this.generateTooltipHTML(d.datasetLabel, formattedValue);
+	}
+
+	showTooltip(d, clickedElement?: Element) {
+		// Reset opacity of all elements in the chart
+		this.resetOpacity();
+
+		const { customHTML } = this.options.tooltip;
+		let contentHTML;
+		if (customHTML) {
+			contentHTML = customHTML;
 		} else {
-			contentHTML += this.generateTooltipHTML(d.datasetLabel, formattedValue);
+			contentHTML = this.getTooltipHTML(d);
 		}
 
 		this.tooltip.show(contentHTML);

packages/core/src/components/positionService.ts

@@ -3,10 +3,10 @@
  */
 
 export const PLACEMENTS = {
-    LEFT: "left",
-    RIGHT: "right",
-    TOP: "top",
-    BOTTOM: "bottom"
+	LEFT: "left",
+	RIGHT: "right",
+	TOP: "top",
+	BOTTOM: "bottom"
 }
 
 export interface AbsolutePosition {
@@ -127,7 +127,7 @@ export default class Position {
 	}
 
 	findPositionAt(offset: Offset, target: Element, placement: string): AbsolutePosition {
-		return this.calculatePosition(offset, {height: 0, width: 0}, target, placement);
+		return this.calculatePosition(offset, { height: 0, width: 0 }, target, placement);
 	}
 
 	/**
@@ -164,7 +164,7 @@ export default class Position {
 		 */
 		const weightedPlacements = placements.map(placement => {
 			const pos = this.findPosition(reference, target, placement);
-            let box = this.getPlacementBox((target as HTMLElement), pos);
+			let box = this.getPlacementBox((target as HTMLElement), pos);
 			let hiddenHeight = box.bottom - window.innerHeight - window.scrollY;
 			let hiddenWidth = box.right - window.innerWidth - window.scrollX;
 			// if the hiddenHeight or hiddenWidth is negative, reset to offsetHeight or offsetWidth
@@ -186,26 +186,26 @@ export default class Position {
 		weightedPlacements.sort((a, b) => b.weight - a.weight);
 		// pick the best!
 		return weightedPlacements[0].placement;
-    }
+	}
 
-    findBestPlacementAt(offset: Offset, reference: Element, target: Element, placements: string[]) {
+	findBestPlacementAt(offset: Offset, reference: Element, target: Element, placements: string[]) {
 		/**
 		 * map over the array of placements and weight them based on the percentage of visible area
 		 * where visible area is defined as the area not obscured by the reference borders
 		 */
 		const weightedPlacements = placements.map(placement => {
 			const pos = this.findPositionAt(offset, target, placement);
-            let box = this.getPlacementBox((target as HTMLElement), pos);
+			let box = this.getPlacementBox((target as HTMLElement), pos);
 			let hiddenHeight = box.bottom - (reference as HTMLElement).offsetHeight;
-            let hiddenWidth = box.right - (reference as HTMLElement).offsetWidth;
+			let hiddenWidth = box.right - (reference as HTMLElement).offsetWidth;
 			// if the hiddenHeight or hiddenWidth is negative, reset to offsetHeight or offsetWidth
 			hiddenHeight = hiddenHeight < 0 ? (target as HTMLElement).offsetHeight : hiddenHeight;
-            hiddenWidth = hiddenWidth < 0 ? (target as HTMLElement).offsetWidth : hiddenWidth;
+			hiddenWidth = hiddenWidth < 0 ? (target as HTMLElement).offsetWidth : hiddenWidth;
 			const area = (target as HTMLElement).offsetHeight * (target as HTMLElement).offsetWidth;
 			const hiddenArea = hiddenHeight * hiddenWidth;
 			let visibleArea = area - hiddenArea;
 			// if the visibleArea is 0 set it back to area (to calculate the percentage in a useful way)
-            visibleArea = visibleArea === 0 ? area : visibleArea;
+			visibleArea = visibleArea === 0 ? area : visibleArea;
 
 			const visiblePercent = visibleArea / area;
 			return {

packages/core/src/configuration.ts

@@ -105,6 +105,10 @@ export interface BaseChartOptions {
 		 * elements onto which a hover or click would not trigger the tooltip to hide
 		 */
 		targetsToSkip: Array<String>;
+		/**
+		 * custom HTML content for tooltip provided by user
+		 */
+		customHTML?: string;
 	};
 	overlay?: ChartOverlayOptions;
 	/**

packages/core/src/pie-chart.ts

@@ -278,35 +278,7 @@ export class PieChart extends BaseChart {
 		}
 	}
 
-	// TODO - Should inherit most logic from base-chart
-	showTooltip(d) {
-		this.resetOpacity();
-
-		selectAll(".tooltip").remove();
-		const tooltip = select(this.holder).append("div")
-			.attr("class", "tooltip chart-tooltip")
-			.style("top", mouse(this.holder as SVGSVGElement)[1] - Configuration.tooltip.magicTop2 + "px");
-
-		const dVal = d.value.toLocaleString();
-		const tooltipHTML = this.generateTooltipHTML(d.data.label, dVal);
-
-		tooltip.append("div").attr("class", "text-box").html(tooltipHTML);
-		if (mouse(this.holder as SVGSVGElement)[0] + (tooltip.node() as Element).clientWidth > this.holder.clientWidth) {
-			tooltip.style(
-				"left",
-				mouse(this.holder as SVGSVGElement)[0] - (tooltip.node() as Element).clientWidth - Configuration.tooltip.magicLeft1 + "px"
-			);
-		} else {
-			tooltip.style("left", mouse(this.holder as SVGSVGElement)[0] + Configuration.tooltip.magicLeft2 + "px");
-		}
-
-		tooltip.style("opacity", 0)
-			.transition()
-			.duration(Configuration.tooltip.fadeIn.duration)
-			.style("opacity", 1);
-
-		// this.addTooltipEventListeners(tooltip);
-	}
+	getTooltipHTML = d => this.generateTooltipHTML(d.data.label, d.value.toLocaleString());
 
 	// TODO - Refactor
 	addDataPointEventListener() {
@@ -321,21 +293,14 @@ export class PieChart extends BaseChart {
 				const sliceElement = select(this);
 				Tools.moveToFront(sliceElement);
 
-				sliceElement
-					.attr("stroke-width", Configuration.pie.mouseover.strokeWidth)
+				sliceElement.attr("stroke-width", Configuration.pie.mouseover.strokeWidth)
 					.attr("stroke-opacity", Configuration.pie.mouseover.strokeOpacity)
 					.attr("stroke", self.getStrokeColor(self.displayData.datasets[0].label, d.data.label, d.data.value));
 
 				self.showTooltip(d);
 				self.reduceOpacity(this);
 			})
-			.on("mousemove", function(d) {
-				const tooltipRef = select(self.holder).select("div.chart-tooltip");
-
-				const relativeMousePosition = mouse(self.holder as HTMLElement);
-				tooltipRef.style("left", relativeMousePosition[0] + Configuration.tooltip.magicLeft2 + "px")
-					.style("top", relativeMousePosition[1] + "px");
-			})
+			.on("mousemove", d => self.tooltip.positionTooltip())
 			.on("mouseout", function(d) {
 				select(this)
 					.attr("stroke-width", accessibility ? Configuration.pie.default.strokeWidth : Configuration.pie.mouseout.strokeWidth)