add example, change desc, add const for offset, improve test

paulinashakirova · paulinashakirova · commit 3c87aee1c9fd · 2025-09-03T18:34:07.000+02:00
diff --git a/packages/eui/changelogs/upcoming/8988.md b/packages/eui/changelogs/upcoming/8988.md
@@ -1 +1 @@
-- Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. The default value is `16`.
+- Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor.
diff --git a/packages/eui/src/components/tool_tip/tool_tip.stories.tsx b/packages/eui/src/components/tool_tip/tool_tip.stories.tsx
@@ -14,7 +14,11 @@ import { LOKI_SELECTORS, lokiPlayDecorator } from '../../../.storybook/loki';
 import { sleep } from '../../test';
 import { EuiFlexGroup } from '../flex';
 import { EuiButton } from '../button';
-import { EuiToolTip, EuiToolTipProps } from './tool_tip';
+import {
+  EuiToolTip,
+  EuiToolTipProps,
+  DEFAULT_TOOLTIP_OFFSET,
+} from './tool_tip';
 
 const meta: Meta<EuiToolTipProps> = {
   title: 'Display/EuiToolTip',
@@ -47,7 +51,7 @@ const meta: Meta<EuiToolTipProps> = {
     repositionOnScroll: false,
     title: '',
     disableScreenReaderOutput: false,
-    offset: 16,
+    offset: DEFAULT_TOOLTIP_OFFSET,
   },
 };
 enableFunctionToggleControls(meta, ['onMouseOut']);
diff --git a/packages/eui/src/components/tool_tip/tool_tip.test.tsx b/packages/eui/src/components/tool_tip/tool_tip.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { useRef } from 'react';
-import { fireEvent, within } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { userEvent } from '@storybook/test';
 import {
   render,
@@ -64,12 +64,12 @@ describe('EuiToolTip', () => {
 
   it('uses custom offset prop value', async () => {
     const offsetValue = 32;
-    const { baseElement } = render(
+    const { baseElement, getByRole } = render(
       <EuiToolTip content="content" offset={offsetValue} {...requiredProps}>
         <button data-test-subj="trigger">Trigger</button>
       </EuiToolTip>
     );
-    const trigger = within(baseElement).getByRole('button');
+    const trigger = getByRole('button');
 
     await userEvent.hover(trigger);
     await waitForEuiToolTipVisible();
diff --git a/packages/eui/src/components/tool_tip/tool_tip.tsx b/packages/eui/src/components/tool_tip/tool_tip.tsx
@@ -31,6 +31,7 @@ export const POSITIONS = ['top', 'right', 'bottom', 'left'] as const;
 const DISPLAYS = ['inlineBlock', 'block'] as const;
 
 export type ToolTipDelay = 'regular' | 'long';
+export const DEFAULT_TOOLTIP_OFFSET = 16;
 
 const delayToMsMap: { [key in ToolTipDelay]: number } = {
   regular: 250,
@@ -123,7 +124,7 @@ export interface EuiToolTipProps extends CommonProps {
   onMouseOut?: (event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => void;
 
   /**
-   * Offset in pixels from the anchor. Defaults to 16.
+   * You can adjust the distance between the tooltip and its anchor using the `offset` prop. By default, this value is `16`.
    */
   offset?: number;
 }
@@ -225,7 +226,7 @@ export class EuiToolTip extends Component<EuiToolTipProps, State> {
 
   positionToolTip = () => {
     const requestedPosition = this.props.position;
-    const offset = this.props.offset ?? 16;
+    const offset = this.props.offset ?? DEFAULT_TOOLTIP_OFFSET;
 
     if (!this.anchor || !this.popover) {
       return;
diff --git a/packages/website/docs/components/display/tooltip.mdx b/packages/website/docs/components/display/tooltip.mdx
@@ -65,6 +65,12 @@ export default () => (
           <EuiIcon tabIndex="0" type="warning" title="Icon with tooltip" />
         </EuiToolTip>
       </p>
+      <p>
+        This tooltip has a{' '}
+        <EuiToolTip position="right" content="Here is some tooltip text" offset={32}>
+          <EuiLink href="#">custom offset</EuiLink>
+        </EuiToolTip>
+      </p>
     </EuiText>
   </div>
 );

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-- Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor. The default value is `16`.
	`1`	+- Added an optional `offset` prop to `EuiToolTip` to allow customizing the distance (in pixels) between the tooltip and its anchor.