[EuiListGroupItem] Adding a toolTipProps spread operator to allow tooltip customization

src-docs/src/views/list_group/list_group_example.js

@@ -158,6 +158,10 @@ export const ListGroupExample = {
             tooltip text. By default, the tooltip will have the text same as the{' '}
             <EuiCode>label</EuiCode>.
           </p>
+          <p>
+            Use <EuiCode>toolTipProps</EuiCode> to customize tooltip placement,
+            title, and other behaviors.
+          </p>
         </>
       ),
       demo: <ListGroupExtra />,

src-docs/src/views/list_group/list_group_extra.tsx

@@ -1,6 +1,18 @@
 import React from 'react';
 
-import { EuiListGroup, EuiListGroupItem } from '../../../../src/components';
+import {
+  EuiListGroup,
+  EuiListGroupItem,
+  EuiToolTipProps,
+} from '../../../../src/components';
+
+const myToolTipProps: EuiToolTipProps = {
+  children: <span />,
+  delay: 'regular',
+  id: '12345',
+  position: 'top',
+  title: 'Title of record',
+};
 
 export default () => (
   <EuiListGroup showToolTips>
@@ -25,7 +37,8 @@ export default () => (
     <EuiListGroupItem
       onClick={() => {}}
       wrapText
-      label="Fourth very, very long item with wrapping enabled that will not force truncation"
+      label="Fourth very long item with wrapping enabled, custom props, and will not force truncation."
+      toolTipProps={myToolTipProps}
     />
   </EuiListGroup>
 );

src/components/list_group/list_group.test.tsx

@@ -32,6 +32,13 @@ const someListItems: EuiListGroupItemProps[] = [
     onClick: (e) => {
       console.log('Visualize clicked', e);
     },
+    toolTipProps: {
+      children: <button />,
+      delay: 'regular',
+      id: '12345',
+      position: 'top',
+      title: 'Title of record',
+    },
   },
   {
     label: 'Active link',

src/components/list_group/list_group_item.tsx

@@ -19,7 +19,7 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiIcon, IconType, EuiIconProps } from '../icon';
-import { EuiToolTip } from '../tool_tip';
+import { EuiToolTip, EuiToolTipProps } from '../tool_tip';
 import { useInnerText } from '../inner_text';
 import { ExclusiveUnion, CommonProps } from '../common';
 import {
@@ -144,6 +144,11 @@ export type EuiListGroupItemProps = CommonProps &
      * By default the text will be same as the label text.
      */
     toolTipText?: string;
+
+    /**
+     * Props can be passed to nested`EuiToolTip`.
+     */
+    toolTipProps?: EuiToolTipProps;
   };
 
 export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
@@ -166,6 +171,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   wrapText,
   buttonRef,
   toolTipText,
+  toolTipProps,
   ...rest
 }) => {
   const isClickable = !!(href || onClick);
@@ -330,6 +336,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
           content={toolTipText ?? label}
           position="right"
           delay="long"
+          {...toolTipProps}
         >
           {itemContent}
         </EuiToolTip>

upcoming_changelogs/7018.md

@@ -0,0 +1 @@
+- Added `toolTipProps` to `EuiListGroupItem` to customize nested tooltips.