diff --git a/src/components/basic_table/collapsed_item_actions.tsx b/src/components/basic_table/collapsed_item_actions.tsx index 8a81efd4d91f..580e21d6a65a 100644 --- a/src/components/basic_table/collapsed_item_actions.tsx +++ b/src/components/basic_table/collapsed_item_actions.tsx @@ -103,6 +103,7 @@ export const CollapsedItemActions = ({ onClickItem(onClick ? () => onClick(item) : undefined) } toolTipContent={toolTipContent} + toolTipProps={{ delay: 'long' }} > {buttonContent} diff --git a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap index 4901078ca83d..3f3195e9a971 100644 --- a/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu_item.test.tsx.snap @@ -60,3 +60,52 @@ exports[`EuiContextMenuItem renders 1`] = ` `; + +exports[`EuiContextMenuItem tooltip behavior 1`] = ` + +
+ + + +
+
+ + +`; diff --git a/src/components/context_menu/context_menu_item.test.tsx b/src/components/context_menu/context_menu_item.test.tsx index 7ec564cc5e20..8c26344cfcc8 100644 --- a/src/components/context_menu/context_menu_item.test.tsx +++ b/src/components/context_menu/context_menu_item.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { fireEvent } from '@testing-library/react'; -import { render } from '../../test/rtl'; +import { render, waitForEuiToolTipVisible } from '../../test/rtl'; import { shouldRenderCustomStyles } from '../../test/internal'; import { requiredProps } from '../../test/required_props'; @@ -17,6 +17,18 @@ import { EuiContextMenuItem, SIZES } from './context_menu_item'; describe('EuiContextMenuItem', () => { shouldRenderCustomStyles(); + shouldRenderCustomStyles( + , + { + childProps: ['toolTipProps', 'toolTipProps.anchorProps'], + skip: { parentTest: true }, + renderCallback: async ({ getByTestSubject }) => { + fireEvent.mouseOver(getByTestSubject('trigger')); + await waitForEuiToolTipVisible(); + }, + } + ); + it('renders', () => { const { container } = render( @@ -121,4 +133,22 @@ describe('EuiContextMenuItem', () => { ).toBeInTheDocument(); }); }); + + test('tooltip behavior', async () => { + const { getByRole, baseElement } = render( + + Hello + + ); + + fireEvent.mouseOver(getByRole('button')); + await waitForEuiToolTipVisible(); + + expect(baseElement).toMatchSnapshot(); + }); }); diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx index 50c6158e213e..a531be2431ed 100644 --- a/src/components/context_menu/context_menu_item.tsx +++ b/src/components/context_menu/context_menu_item.tsx @@ -25,7 +25,7 @@ import { import { validateHref } from '../../services/security/href_validator'; import { CommonProps, keysOf } from '../common'; import { EuiIcon } from '../icon'; -import { EuiToolTip, ToolTipPositions } from '../tool_tip'; +import { EuiToolTip, EuiToolTipProps, ToolTipPositions } from '../tool_tip'; import { euiContextMenuItemStyles } from './context_menu_item.styles'; @@ -46,11 +46,16 @@ export interface EuiContextMenuItemProps extends CommonProps { */ toolTipContent?: ReactNode; /** - * Optional title for the tooltip + * Optional configuration to pass to the underlying [EuiToolTip](/#/display/tooltip). + * Accepts any prop that EuiToolTip does, except for `content` and `children`. + */ + toolTipProps?: Partial>; + /** + * @deprecated Use toolTipProps.title instead */ toolTipTitle?: ReactNode; /** - * Dictates the position of the tooltip. + * @deprecated Use tooltipProps.position instead */ toolTipPosition?: ToolTipPositions; href?: string; @@ -94,6 +99,7 @@ export const EuiContextMenuItem: FunctionComponent = ({ toolTipTitle, toolTipContent, toolTipPosition = 'right', + toolTipProps, href, target, rel, @@ -173,7 +179,7 @@ export const EuiContextMenuItem: FunctionComponent = ({ {buttonContent} ); - } else if (href || rest.onClick) { + } else if (href || rest.onClick || toolTipContent) { button = (