[EuiBasicTable] Implement nameTooltip API in columns prop

packages/eui/changelogs/upcoming/8273.md

@@ -0,0 +1,3 @@
+- Updated table components to support adding tooltips to header cells
+  - Added `iconTipProps` prop on `EuiTableHeaderCell`
+  - Added `columns.nameIconTip` on `EuiBasicTable`

packages/eui/i18ntokens.json

@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1132,
+        "line": 1134,
         "column": 8,
-        "index": 31375
+        "index": 31431
       },
       "end": {
-        "line": 1136,
+        "line": 1138,
         "column": 9,
-        "index": 31530
+        "index": 31586
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -167,14 +167,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1379,
+        "line": 1383,
         "column": 8,
-        "index": 38636
+        "index": 38780
       },
       "end": {
-        "line": 1383,
+        "line": 1387,
         "column": 9,
-        "index": 38795
+        "index": 38939
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -6845,14 +6845,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 85,
+        "line": 90,
         "column": 10,
-        "index": 2640
+        "index": 2860
       },
       "end": {
-        "line": 89,
+        "line": 94,
         "column": 11,
-        "index": 2814
+        "index": 3034
       }
     },
     "filepath": "src/components/table/table_header_cell.tsx"
@@ -7025,14 +7025,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 65,
+        "line": 63,
         "column": 27,
-        "index": 1862
+        "index": 1819
       },
       "end": {
-        "line": 65,
+        "line": 63,
         "column": 76,
-        "index": 1911
+        "index": 1868
       }
     },
     "filepath": "src/components/tool_tip/icon_tip.tsx"

packages/eui/src-docs/src/views/tables/in_memory/in_memory.tsx

@@ -85,6 +85,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameIconTip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src-docs/src/views/tables/sorting/sorting.tsx

@@ -8,9 +8,7 @@ import {
   EuiTableSortingType,
   Criteria,
   EuiHealth,
-  EuiIcon,
   EuiLink,
-  EuiToolTip,
   EuiFlexGroup,
   EuiFlexItem,
   EuiSwitch,
@@ -76,19 +74,10 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'github',
-    name: (
-      <EuiToolTip content="Their mascot is the Octokitty">
-        <>
-          Github{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'GibHub',
+    nameIconTip: {
+      content: 'Their mascot is the Octokitty',
+    },
     render: (username: User['github']) => (
       <EuiLink href="#" target="_blank">
         {username}
@@ -97,37 +86,19 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'dateOfBirth',
-    name: (
-      <EuiToolTip content="Colloquially known as a 'birthday'">
-        <>
-          Date of Birth{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Date of Birth',
+    nameIconTip: {
+      content: "Colloquially known as a 'birthday'",
+    },
     render: (dateOfBirth: User['dateOfBirth']) =>
       formatDate(dateOfBirth, 'dobLong'),
   },
   {
     field: 'location',
-    name: (
-      <EuiToolTip content="The city and country in which this person resides">
-        <>
-          Nationality{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Nationality',
+    nameIconTip: {
+      content: 'The city and country in which this person resides',
+    },
     render: (location: User['location']) => {
       return `${location.city}, ${location.country}`;
     },
@@ -136,19 +107,10 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   },
   {
     field: 'online',
-    name: (
-      <EuiToolTip content="Free to talk or busy with business">
-        <>
-          Online{' '}
-          <EuiIcon
-            size="s"
-            color="subdued"
-            type="questionInCircle"
-            className="eui-alignTop"
-          />
-        </>
-      </EuiToolTip>
-    ),
+    name: 'Online',
+    nameIconTip: {
+      content: 'Free to talk or busy with business',
+    },
     render: (online: User['online']) => {
       const color = online ? 'success' : 'danger';
       const label = online ? 'Online' : 'Offline';

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -114,6 +114,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameIconTip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src/components/basic_table/basic_table.tsx

@@ -753,6 +753,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
         field,
         width,
         name,
+        nameIconTip,
         align,
         dataType,
         sortable,
@@ -765,6 +766,7 @@ export class EuiBasicTable<T extends object = any> extends Component<
 
       const sharedProps = {
         width,
+        iconTipProps: nameIconTip,
         description,
         mobileOptions,
         align: columnAlign,
@@ -1280,6 +1282,8 @@ export class EuiBasicTable<T extends object = any> extends Component<
       sortable,
       footer,
       mobileOptions,
+      // Do not pass `nameIconTip` down, we don't want it in the DOM
+      nameIconTip,
       ...rest
     } = column as EuiTableFieldDataColumnType<T>;
     const columnAlign = align || this.getAlignForDataType(dataType);

packages/eui/src/components/basic_table/in_memory_table.stories.tsx

@@ -102,6 +102,9 @@ const columns: Array<EuiBasicTableColumn<User>> = [
   {
     field: 'location',
     name: 'Location',
+    nameIconTip: {
+      content: 'The city and country in which this person resides',
+    },
     truncateText: true,
     textOnly: true,
     render: (location: User['location']) => {

packages/eui/src/components/basic_table/table_types.ts

@@ -16,6 +16,7 @@ import {
   EuiTableRowCellProps,
   EuiTableRowCellMobileOptionsShape,
 } from '../table/table_row_cell';
+import { EuiIconTipProps } from '../tool_tip';
 
 export type ItemId<T> = string | number | ((item: T) => string);
 export type ItemIdResolved = string | number;
@@ -44,6 +45,10 @@ export interface EuiTableFieldDataColumnType<T>
    * The display name of the column
    */
   name: ReactNode;
+  /**
+   * Allows adding an icon with a tooltip displayed next to the name
+   */
+  nameIconTip?: EuiIconTipProps;
   /**
    * A description of the column (will be presented as a title over the column header)
    */
@@ -118,6 +123,10 @@ export type EuiTableComputedColumnType<T> = CommonProps &
      * The display name of the column
      */
     name?: ReactNode;
+    /**
+     * Allows configuring an icon with a tooltip, to be displayed next to the name
+     */
+    nameIconTip?: EuiIconTipProps;
     /**
      * If provided, allows this column to be sorted on. Must return the value to sort against.
      */
@@ -141,6 +150,10 @@ export type EuiTableActionsColumnType<T extends object> = {
    * The display name of the column
    */
   name?: ReactNode;
+  /**
+   * Allows configuring an icon with a tooltip, to be displayed next to the name
+   */
+  nameIconTip?: EuiIconTipProps;
 } & Pick<EuiTableFieldDataColumnType<T>, 'description' | 'width'>;
 
 export interface EuiTableSortingType<T> {

packages/eui/src/components/table/table_header_cell.stories.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
 import {
   enableFunctionToggleControls,
   hideStorybookControls,
@@ -52,6 +53,12 @@ const meta: Meta<EuiTableHeaderCellProps> = {
     },
     description: '',
   },
+  // FIXME I couldn't get this to work
+  parameters: {
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
 };
 hideStorybookControls(meta, ['aria-label']);
 enableFunctionToggleControls(meta, ['onSort']);
@@ -66,3 +73,19 @@ export const Playground: Story = {
     onSort: false,
   },
 };
+
+export const IconTip: Story = {
+  parameters: {
+    controls: {
+      include: ['iconTipProps'],
+    },
+  },
+  args: {
+    children: 'Header cell content',
+    // @ts-ignore - overwrite meta default to align with base behavior
+    onSort: false,
+    iconTipProps: {
+      content: 'tooltip content',
+    },
+  },
+};

packages/eui/src/components/table/table_header_cell.test.tsx

@@ -8,7 +8,8 @@
 
 import React from 'react';
 import { requiredProps } from '../../test/required_props';
-import { render } from '../../test/rtl';
+import { render, waitForEuiToolTipVisible } from '../../test/rtl';
+import { fireEvent } from '@testing-library/react';
 
 import { RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services';
 import { WARNING_MESSAGE } from './utils';
@@ -185,4 +186,55 @@ describe('EuiTableHeaderCell', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
   });
+
+  describe('iconTip', () => {
+    it('renders an icon with tooltip', async () => {
+      const { getByTestSubject } = renderInTableHeader(
+        <EuiTableHeaderCell
+          iconTipProps={{
+            content: 'This is the content of the tooltip',
+            type: 'iInCircle',
+            iconProps: {
+              'data-test-subj': 'icon',
+            },
+            'data-test-subj': 'tooltip',
+          }}
+        >
+          Test
+        </EuiTableHeaderCell>
+      );
+
+      expect(getByTestSubject('icon')).toHaveAttribute(
+        'data-euiicon-type',
+        'iInCircle'
+      );
+
+      fireEvent.focus(getByTestSubject('icon'));
+      await waitForEuiToolTipVisible();
+
+      expect(getByTestSubject('tooltip')).toHaveTextContent(
+        'This is the content of the tooltip'
+      );
+    });
+
+    it('renders the icon next to the text', () => {
+      const { getByTestSubject, queryByText } = renderInTableHeader(
+        <EuiTableHeaderCell
+          iconTipProps={{
+            content: 'This is the content of the tooltip',
+            iconProps: {
+              'data-test-subj': 'icon',
+            },
+          }}
+          onSort={() => {}}
+        >
+          Test
+        </EuiTableHeaderCell>
+      );
+
+      expect(queryByText('Test')?.nextSibling).toEqual(
+        getByTestSubject('icon').parentElement
+      );
+    });
+  });
 });