fix(tooltip): add boundary padding

api/charts.api.md

@@ -2221,6 +2221,8 @@ export interface TooltipInfo {
 // @public
 export interface TooltipPortalSettings<B = never> {
     boundary?: HTMLElement | B;
+    // Warning: (ae-forgotten-export) The symbol "Padding" needs to be exported by the entry point index.d.ts
+    boundaryPadding?: Partial<Padding_2> | number;
     fallbackPlacements?: Placement[];
     offset?: number;
     placement?: Placement;

src/components/portal/tooltip_portal.tsx

@@ -22,6 +22,7 @@ import { useRef, useEffect, useCallback, ReactNode, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
 import { mergePartial, isDefined } from '../../utils/common';
+import { Padding } from '../../utils/dimensions';
 import { TooltipPortalSettings, PortalAnchorRef } from './types';
 import { DEFAULT_POPPER_SETTINGS, getOrCreateNode, isHTMLElement } from './utils';
 
@@ -56,6 +57,20 @@ type PortalTooltipProps = {
   chartId: string;
 };
 
+function addToPadding(padding?: Partial<Padding> | number, extra: number = 0): Padding | number | undefined {
+  if (!padding) return undefined;
+  if (typeof padding === 'number') return padding + extra;
+
+  const { top = 0, right = 0, bottom = 0, left = 0 } = padding;
+
+  return {
+    top: top + extra,
+    right: right + extra,
+    bottom: bottom + extra,
+    left: left + extra,
+  };
+}
+
 const TooltipPortalComponent = ({
   anchor,
   scope,
@@ -113,7 +128,7 @@ const TooltipPortalComponent = ({
       return;
     }
 
-    const { fallbackPlacements, placement, boundary, offset } = popperSettings;
+    const { fallbackPlacements, placement, boundary, offset, boundaryPadding } = popperSettings;
     popper.current = createPopper(anchorNode.current, portalNode.current, {
       strategy: 'absolute',
       placement,
@@ -128,6 +143,7 @@ const TooltipPortalComponent = ({
           name: 'preventOverflow',
           options: {
             boundary,
+            padding: boundaryPadding,
           },
         },
         {
@@ -138,7 +154,7 @@ const TooltipPortalComponent = ({
             boundary,
             // checks main axis overflow before trying to flip
             altAxis: false,
-            padding: offset || 10,
+            padding: addToPadding(boundaryPadding, offset || 10),
           },
         },
       ],

src/components/portal/types.ts

@@ -19,6 +19,8 @@
 
 import { $Values } from 'utility-types';
 
+import { Padding } from '../../utils/dimensions';
+
 /**
  * Placement used in positioning tooltip
  * @public
@@ -100,6 +102,13 @@ export interface TooltipPortalSettings<B = never> {
    * @defaultValue parent scroll container
    */
   boundary?: HTMLElement | B;
+  /**
+   * Boundary element padding.
+   * Used to reduce extents of boundary placement when magins or paddings are used on boundary
+   *
+   * @defaultValue 0
+   */
+  boundaryPadding?: Partial<Padding> | number;
   /**
    * Custom tooltip offset
    */

stories/bar/55_tooltip_boundary.tsx

@@ -42,7 +42,7 @@ export const Example = () => {
   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> = {
+  const getBoundary: Record<string, TooltipProps['boundary'] | null> = {
     default: undefined,
     red: red.current,
     white: white.current,
@@ -62,14 +62,20 @@ export const Example = () => {
     },
     'default',
   );
-  const boundary = boundaryMap[boundarySting] ?? undefined;
+  const boundary = getBoundary[boundarySting] ?? undefined;
+  const boundaryPadding = {
+    top: number('Boundary top padding', 0, { min: 0 }),
+    right: number('Boundary right padding', 0, { min: 0 }),
+    bottom: number('Boundary bottom padding', 0, { min: 0 }),
+    left: number('Boundary left padding', 0, { min: 0 }),
+  };
 
   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 }} />
+            <Settings tooltip={{ boundary, boundaryPadding }} />
             <Axis id="bottom" hide={!showAxes} position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
             <Axis
               id="left"