[EuiBasicTable] Better document columns.nameTooltip (#8343)

Co-authored-by: Tomasz Kajtoch <[email protected]>

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

@@ -69,6 +69,9 @@ export default () => {
     {
       field: 'github',
       name: 'Github',
+      nameTooltip: {
+        content: 'Their mascot is the Octokitty',
+      },
       render: (username: User['github']) => (
         <EuiLink href="#" target="_blank">
           {username}

packages/eui/src-docs/src/views/tables/basic/basic_section.js

@@ -88,6 +88,14 @@ export const section = {
           properly.
         </li>
       </ul>
+      <p>
+        If a column name needs a longer description, an icon with a tooltip can
+        be used. This can be done using the{' '}
+        <EuiCode language="js">columns.nameTooltip</EuiCode> property (e.g. the
+        "GitHub" column as seen below). This approach ensures that the icon
+        remains visible even if the text gets truncated, unlike manually using a
+        React node for <EuiCode language="js">columns.name</EuiCode>.
+      </p>
     </>
   ),
   props: {

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

@@ -34,6 +34,7 @@ export interface EuiTableFooterProps<T> {
   pagination?: Pagination;
 }
 
+/** Allows adding an icon with a tooltip to column names */
 export type EuiTableColumnNameTooltipProps = {
   /** The main content of the tooltip */
   content: ReactNode;

packages/website/docs/components/tabular_content/tables/basic_tables.mdx

@@ -76,6 +76,9 @@ export default () => {
     {
       field: 'github',
       name: 'Github',
+      nameTooltip: {
+        content: 'Their mascot is the Octokitty'
+      },
       render: (username: User['github']) => (
         <EuiLink href="#" target="_blank">
           {username}
@@ -144,6 +147,8 @@ In the above example, some columns displayed the value as-is (e.g. `firstName` a
 - Provide a `render` function that given the value (and the item as a second argument) returns the React node that should be displayed as the content of the cell. This can be as simple as formatting values (e.g. the "Date of Birth" column), to utilizing more complex React components (e.g. the "Online" and "Github" columns).
   - **Note:** the basic table will treat any cells that use a `render` function as being `textOnly: false`. This may cause unnecessary word breaks. Apply `textOnly: true` to ensure it breaks properly.
 
+If a column name needs a longer description, an icon with a tooltip can be used. This can be done using the `columns.nameTooltip` property. This approach ensures that the icon remains visible even if the text gets truncated, unlike manually using a React node for `columns.name`.
+
 ## Row selection
 
 The following example shows how to configure row selection via the `selection` property. For uncontrolled usage, where selection changes are determined entirely by the user, you can set items to be selected initially by passing an array of items to `selection.initialSelected`. You can also use `selected.onSelectionChange` to track or respond to the items that users select.