fix(tooltip): allow explicit boundary element (#1049) (#1056)

integration/tests/interactions.test.ts

@@ -169,6 +169,30 @@ describe('Interactions', () => {
         { left: 120, bottom: 80 },
       );
     });
+
+    describe.each([
+      // TODO: find why these vrt don't position tooltip wrt boundary
+      // ['Root', 'root', 7],
+      // ['Red', 'red', 6],
+      // ['White', 'white', 5],
+      // ['Blue', 'blue', 3],
+      ['Chart', 'chart', 2],
+    ])('Boundary - %s', (_, boundary, groups) => {
+      it('should contain tooltip inside boundary near top', async () => {
+        await common.expectChartWithMouseAtUrlToMatchScreenshot(
+          `http://localhost:9001/?path=/story/bar-chart--tooltip-boundary&knob-Boundary Element=${boundary}&knob-Groups=${groups}&knob-Show axes=false`,
+          { left: 100, top: 20 },
+          { screenshotSelector: 'body' },
+        );
+      });
+      it('should contain tooltip inside boundary near bottom', async () => {
+        await common.expectChartWithMouseAtUrlToMatchScreenshot(
+          `http://localhost:9001/?path=/story/bar-chart--tooltip-boundary&knob-Boundary Element=${boundary}&knob-Groups=${groups}&knob-Show axes=false`,
+          { left: 100, bottom: 20 },
+          { screenshotSelector: 'body' },
+        );
+      });
+    });
   });
 
   describe('brushing', () => {

src/chart_types/xy_chart/renderer/dom/annotations/annotation_tooltip.tsx

@@ -66,7 +66,7 @@ export const AnnotationTooltip = ({ state, chartRef, chartId, onScroll, zIndex }
     return {
       ...rest,
       placement: placement ?? Placement.Right,
-      boundary: boundary === 'chart' && chartRef.current ? chartRef.current : undefined,
+      boundary: boundary === 'chart' ? chartRef.current ?? undefined : boundary,
     };
   }, [state?.tooltipSettings, chartRef]);
 

src/components/tooltip/tooltip.tsx

@@ -200,7 +200,7 @@ const TooltipComponent = ({
         (rotation === 0 || rotation === 180
           ? [Placement.Right, Placement.Left, Placement.Top, Placement.Bottom]
           : [Placement.Top, Placement.Bottom, Placement.Right, Placement.Left]),
-      boundary: boundary === 'chart' && chartRef.current ? chartRef.current : undefined,
+      boundary: boundary === 'chart' ? chartRef.current ?? undefined : boundary,
     };
   }, [settings, chartRef, rotation]);
 

stories/bar/55_tooltip_boundary.tsx

@@ -0,0 +1,101 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { boolean, number, select } from '@storybook/addon-knobs';
+import React, { useRef } from 'react';
+
+import { Axis, BarSeries, Chart, Position, ScaleType, Settings, TooltipProps } from '../../src';
+import { getRandomNumberGenerator, SeededDataGenerator } from '../../src/mocks/utils';
+import { SB_KNOBS_PANEL } from '../utils/storybook';
+
+const dg = new SeededDataGenerator();
+const rng = getRandomNumberGenerator();
+
+export const Example = () => {
+  const showAxes = boolean('Show axes', false);
+  const groups = number('Groups', 5, { min: 2, max: 20, step: 1 });
+  const data = dg.generateGroupedSeries(4, groups).map((d) => {
+    return {
+      ...d,
+      y1: rng(0, 20),
+      y2: rng(0, 20),
+      g1: `dog ${d.g}`,
+      g2: `cat ${d.g}`,
+    };
+  });
+  const red = useRef<HTMLDivElement | null>(null);
+  const white = useRef<HTMLDivElement | null>(null);
+  const blue = useRef<HTMLDivElement | null>(null);
+  const boundaryMap: Record<string, TooltipProps['boundary'] | null> = {
+    default: undefined,
+    red: red.current,
+    white: white.current,
+    blue: blue.current,
+    chart: 'chart',
+    root: document.getElementById('story-root'),
+  };
+  const boundarySting = select<string>(
+    'Boundary Element',
+    {
+      Default: 'default',
+      'Root (blanchedalmond)': 'root',
+      Red: 'red',
+      White: 'white',
+      Blue: 'blue',
+      Chart: 'chart',
+    },
+    'default',
+  );
+  const boundary = boundaryMap[boundarySting] ?? undefined;
+
+  return (
+    <div ref={red} style={{ backgroundColor: 'red', padding: 30, height: '100%' }}>
+      <div ref={white} style={{ backgroundColor: 'white', padding: 30, height: '100%' }}>
+        <div ref={blue} style={{ backgroundColor: 'blue', padding: 30, height: '100%' }}>
+          <Chart className="story-chart">
+            <Settings tooltip={{ boundary }} />
+            <Axis id="bottom" hide={!showAxes} position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
+            <Axis
+              id="left"
+              hide={!showAxes}
+              title="Left axis"
+              position={Position.Left}
+              tickFormat={(d: any) => Number(d).toFixed(2)}
+            />
+            <BarSeries
+              id="bars"
+              xScaleType={ScaleType.Ordinal}
+              yScaleType={ScaleType.Linear}
+              xAccessor="x"
+              yAccessors={['y1', 'y2']}
+              splitSeriesAccessors={['g1', 'g2']}
+              data={data}
+            />
+          </Chart>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Example.story = {
+  parameters: {
+    options: { selectedPanel: SB_KNOBS_PANEL },
+  },
+};

stories/bar/bars.stories.tsx

@@ -83,4 +83,5 @@ export { Example as testDiscover } from './43_test_discover';
 export { Example as testSingleHistogramBarChart } from './44_test_single_histogram';
 export { Example as testMinHeightPositiveAndNegativeValues } from './46_test_min_height';
 export { Example as testTooltipAndRotation } from './48_test_tooltip';
+export { Example as tooltipBoundary } from './55_tooltip_boundary';
 export { Example as testDualYAxis } from './49_test_dual_axis';

stories/utils/knobs.ts

@@ -172,17 +172,24 @@ export const getFallbackPlacementsKnob = (): Placement[] | undefined => {
   return knob;
 };
 
-export const getBoundaryKnob = () =>
-  // @ts-ignore
-  select<TooltipProps['boundary']>(
-    'Boundary Element',
-    {
-      Chart: 'chart',
-      'Document Body': document.body,
-      Default: undefined,
-    },
-    undefined,
-  );
+const boundaryMap: Record<string, TooltipProps['boundary'] | null> = {
+  default: undefined,
+  chart: 'chart',
+};
+
+export const getBoundaryKnob = () => {
+  const boundaryString =
+    select<string>(
+      'Boundary Element',
+      {
+        Default: 'default',
+        Chart: 'chart',
+      },
+      'default',
+    ) ?? '';
+
+  return boundaryMap[boundaryString] ?? undefined;
+};
 
 export const getVerticalTextAlignmentKnob = (group?: string) =>
   select<VerticalAlignment | undefined>(