feat: Add dismissTooltip callback to custom content renderers (#121)

* feat(tooltip): add dismissTooltip callback to custom content renderers

Add dismissTooltip callback function to tooltip content renderers (point, header, footer, body) allowing custom content to programmatically dismiss tooltips. This enables interactive elements like buttons within tooltips to close the tooltip when clicked.

* refactor: rename dismissTooltip to hideTooltip in chart tooltip API

- Rename dismissTooltip to hideTooltip in header, body, footer, and point tooltip renderers
- Refactor tooltip tests to use parameterized tests (test.each) for both line and pie chart types, improving test maintainability

* chore: remove usage of getByTestId

* test: remove unneeded leaveChartPoint

---------

Co-authored-by: Mael Kerichard <[email protected]>

Author: Pixselve

pages/03-core/core-line-chart.page.tsx

@@ -129,18 +129,18 @@ export default function () {
         chartHeight={400}
         tooltip={{ placement: "outside" }}
         getTooltipContent={() => ({
-          point({ item }) {
+          point({ item, hideTooltip }) {
             const value = item ? (item.point.y ?? null) : null;
             return {
               value: (
                 <div>
-                  {numberFormatter(value)} <Button variant="inline-icon" iconName="settings" />
+                  {numberFormatter(value)} <Button variant="inline-icon" iconName="settings" onClick={hideTooltip} />
                 </div>
               ),
             };
           },
-          footer() {
-            return <Button>Footer action</Button>;
+          footer({ hideTooltip }) {
+            return <Button onClick={hideTooltip}>Footer action</Button>;
           },
         })}
         getLegendTooltipContent={({ legendItem }) => ({

src/core/__tests__/chart-core-tooltip.test.tsx

@@ -6,8 +6,8 @@ import { waitFor } from "@testing-library/react";
 import highcharts from "highcharts";
 import { vi } from "vitest";
 
-import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import testClasses from "../../../lib/components/core/test-classes/styles.selectors";
+import { CoreChartProps } from "../../../lib/components/internal-do-not-use/core-chart";
 import { createChartWrapper, renderChart } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
 
@@ -460,4 +460,132 @@ describe("CoreChart: tooltip", () => {
 
     expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe("[P3] [60] [custom key] [custom value]");
   });
+
+  describe("dismissTooltip", () => {
+    test.each<{
+      name: string;
+      series: highcharts.SeriesOptionsType[];
+      getTooltipContent: () => CoreChartProps.GetTooltipContent;
+    }>(
+      [
+        [lineSeries, "line"],
+        [pieSeries, "pie"],
+      ].flatMap(([series, type]) => {
+        return [
+          {
+            name: `header renderer - ${type} chart`,
+            series,
+            getTooltipContent: () => ({
+              body: () => "Body",
+              footer: () => "Footer",
+              header: ({ hideTooltip }) => {
+                return (
+                  <button data-testid="hideTooltip" onClick={hideTooltip}>
+                    hideTooltip
+                  </button>
+                );
+              },
+            }),
+          },
+          {
+            name: `body renderer - ${type} chart`,
+            series,
+            getTooltipContent: () => ({
+              header: () => "Header",
+              footer: () => "Footer",
+              body: ({ hideTooltip }) => {
+                return (
+                  <button data-testid="hideTooltip" onClick={hideTooltip}>
+                    hideTooltip
+                  </button>
+                );
+              },
+            }),
+          },
+          {
+            name: `footer renderer - ${type} chart`,
+            series,
+            getTooltipContent: () => ({
+              header: () => "Header",
+              body: () => "Body",
+              footer: ({ hideTooltip }) => {
+                return (
+                  <button data-testid="hideTooltip" onClick={hideTooltip}>
+                    hideTooltip
+                  </button>
+                );
+              },
+            }),
+          },
+        ];
+      }),
+    )("provides dismissTooltip callback to $name", async ({ series, getTooltipContent }) => {
+      const { wrapper } = renderChart({
+        highcharts,
+        options: { series },
+        getTooltipContent: getTooltipContent,
+      });
+
+      act(() => hc.highlightChartPoint(0, 0));
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).not.toBe(null);
+      });
+
+      act(() => {
+        hoverTooltip();
+      });
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).not.toBe(null);
+      });
+
+      act(() => {
+        wrapper.findTooltip()!.find(`[data-testid="hideTooltip"]`).click();
+      });
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).toBe(null);
+      });
+    });
+
+    test("dismissTooltip callback works when tooltip is pinned", async () => {
+      let dismissCallback: (() => void) | undefined;
+      const { wrapper } = renderChart({
+        highcharts,
+        options: { series: pieSeries },
+        getTooltipContent: () => ({
+          header: ({ hideTooltip }) => {
+            dismissCallback = hideTooltip;
+            return "Header";
+          },
+          body: () => "Body",
+        }),
+      });
+
+      act(() => hc.highlightChartPoint(0, 0));
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).not.toBe(null);
+        expect(wrapper.findTooltip()!.findDismissButton()).toBe(null);
+        expect(dismissCallback).toBeDefined();
+      });
+
+      // Pin tooltip
+      act(() => hc.clickChartPoint(0, 0));
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).not.toBe(null);
+        expect(wrapper.findTooltip()!.findDismissButton()).not.toBe(null);
+      });
+
+      act(() => {
+        dismissCallback!();
+      });
+
+      await waitFor(() => {
+        expect(wrapper.findTooltip()).toBe(null);
+      });
+    });
+  });
 });

src/core/chart-api/index.tsx

@@ -184,6 +184,14 @@ export class ChartAPI {
     }
   };
 
+  // Hide the tooltip from an action initiated by the tooltip's content
+  public hideTooltip = () => {
+    this.chartExtraTooltip.hideTooltip();
+    // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case
+    // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire.
+    this.clearChartHighlight({ isApiCall: false });
+  };
+
   // Reference to the role="application" element used for navigation.
   public setApplication = this.chartExtraNavigation.setApplication.bind(this.chartExtraNavigation);
 

src/core/components/core-tooltip.tsx

@@ -70,6 +70,9 @@ export function ChartTooltip({
     group: tooltip.group,
     expandedSeries,
     setExpandedSeries,
+    hideTooltip: () => {
+      api.hideTooltip();
+    },
   });
   if (!content) {
     return null;
@@ -117,6 +120,7 @@ function getTooltipContent(
   api: ChartAPI,
   props: CoreChartProps.GetTooltipContentProps & {
     renderers?: CoreChartProps.TooltipContentRenderer;
+    hideTooltip: () => void;
   } & ExpandedSeriesStateProps,
 ): null | RenderedTooltipContent {
   if (props.point && props.point.series.type === "pie") {
@@ -136,8 +140,10 @@ function getTooltipContentCartesian(
     expandedSeries,
     renderers = {},
     setExpandedSeries,
+    hideTooltip,
   }: CoreChartProps.GetTooltipContentProps & {
     renderers?: CoreChartProps.TooltipContentRenderer;
+    hideTooltip: () => void;
   } & ExpandedSeriesStateProps,
 ): RenderedTooltipContent {
   // The cartesian tooltip might or might not have a selected point, but it always has a non-empty group.
@@ -150,7 +156,12 @@ function getTooltipContentCartesian(
   const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {
     const valueFormatter = getFormatter(item.point.series.yAxis);
     const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);
-    const customContent = renderers.point ? renderers.point({ item }) : undefined;
+    const customContent = renderers.point
+      ? renderers.point({
+          item,
+          hideTooltip,
+        })
+      : undefined;
     return {
       key: customContent?.key ?? item.point.series.name,
       value: customContent?.value ?? valueFormatter(itemY),
@@ -177,7 +188,11 @@ function getTooltipContentCartesian(
   });
   // We only support cartesian charts with a single x axis.
   const titleFormatter = getFormatter(chart.xAxis[0]);
-  const slotRenderProps: CoreChartProps.TooltipSlotProps = { x, items: matchedItems };
+  const slotRenderProps: CoreChartProps.TooltipSlotProps = {
+    x,
+    items: matchedItems,
+    hideTooltip: hideTooltip,
+  };
   return {
     header: renderers.header?.(slotRenderProps) ?? titleFormatter(x),
     body: renderers.body?.(slotRenderProps) ?? (
@@ -203,9 +218,17 @@ function getTooltipContentCartesian(
 
 function getTooltipContentPie(
   api: ChartAPI,
-  { point, renderers = {} }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer },
+  {
+    point,
+    renderers = {},
+    hideTooltip,
+  }: { point: Highcharts.Point } & { renderers?: CoreChartProps.TooltipContentRenderer; hideTooltip: () => void },
 ): RenderedTooltipContent {
-  const tooltipDetails: CoreChartProps.TooltipSlotProps = { x: point.x, items: [{ point, errorRanges: [] }] };
+  const tooltipDetails: CoreChartProps.TooltipSlotProps = {
+    x: point.x,
+    items: [{ point, errorRanges: [] }],
+    hideTooltip,
+  };
   return {
     header: renderers.header?.(tooltipDetails) ?? (
       <div className={styles["tooltip-default-header"]}>
@@ -218,7 +241,13 @@ function getTooltipContentPie(
     body:
       renderers.body?.(tooltipDetails) ??
       (renderers.details ? (
-        <ChartSeriesDetails details={renderers.details({ point })} compactList={true} />
+        <ChartSeriesDetails
+          details={renderers.details({
+            point,
+            hideTooltip,
+          })}
+          compactList={true}
+        />
       ) : (
         // We expect all pie chart segments to have defined y values. We use y=0 as fallback
         // because the property is optional in Highcharts types.

src/core/interfaces.ts

@@ -458,14 +458,17 @@ export namespace CoreChartProps {
   }
   export interface TooltipPointProps {
     item: TooltipContentItem;
+    hideTooltip: () => void;
   }
   export interface TooltipSlotProps {
     x: number;
     items: TooltipContentItem[];
+    hideTooltip: () => void;
   }
 
   export interface TooltipDetailsProps {
     point: Highcharts.Point;
+    hideTooltip: () => void;
   }
 
   export type TooltipDetail = BaseTooltipDetail;

src/pie-chart/chart-pie-internal.tsx

@@ -73,7 +73,7 @@ export const InternalPieChart = forwardRef(
       };
       const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {
         const point = props.items[0].point;
-        return transformDetailsProps({ point });
+        return transformDetailsProps({ point, hideTooltip: props.hideTooltip });
       };
       return {
         header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined,