fix: [Obs Alerts > Alert Detail][KEYBOARD]: Table header has tooltips that must be keyboard focusable (#183523)

Closes: https://github.com/elastic/observability-dev/issues/3379

## Description

The Obs Alert Detail view has a table with several tooltips that are not
keyboard focusable. Screenshot attached below.

### Steps to recreate

1. Open the [Obs
Alerts](https://keepserverless-qa-oblt-b4ba07.kb.eu-west-1.aws.qa.elastic.cloud/app/observability/alerts)
table
2. Click the "Manage Rules" link
3. Create a new rule and verify it appears in the Rules table if you
have none that are generating alerts
4. When the rule appears in the Rules table, click the `[ ... ]` menu
and then click "Run rule"
5. After the rule runs, go back to the `Alerts` view and click on the `[
... ]` menu in the data grid, then click on "View alert details"
6. Tab through the page until you get to the table
7. Verify the tooltips can be accessed with mouse hover, but not
keyboard focus

### What was changed?: 

1. **EuiTooltip** was replaced to **EuiIconTip**


### Screen 


11d66ff6-9139-43fe-93fd-94c6dbb3be4e

x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx

@@ -16,10 +16,8 @@ import {
   EuiBadge,
   EuiBasicTable,
   EuiCode,
-  EuiIcon,
   EuiIconTip,
   EuiText,
-  EuiToolTip,
 } from '@elastic/eui';
 
 import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
@@ -150,7 +148,11 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
               />
             )}
             {type === SIGNIFICANT_ITEM_TYPE.LOG_PATTERN && (
-              <EuiToolTip
+              <EuiIconTip
+                type="aggregate"
+                data-test-subj={'aiopsLogPatternIcon'}
+                css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
+                size="m"
                 content={i18n.translate(
                   'xpack.aiops.fieldContextPopover.descriptionTooltipLogPattern',
                   {
@@ -158,14 +160,7 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
                       'The field value for this field shows an example of the identified significant text field pattern.',
                   }
                 )}
-              >
-                <EuiIcon
-                  type="aggregate"
-                  data-test-subj={'aiopsLogPatternIcon'}
-                  css={{ marginLeft: euiTheme.euiSizeS, marginRight: euiTheme.euiSizeXS }}
-                  size="m"
-                />
-              </EuiToolTip>
+              />
             )}
 
             <span title={fieldName} className="eui-textTruncate">
@@ -206,21 +201,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip', {
-            defaultMessage:
-              'A visual representation of the impact of the field on the message rate difference',
-          })}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
-              defaultMessage="Log rate"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTable.logRateLabel"
+            defaultMessage="Log rate"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            position="top"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTable.logRateColumnTooltip',
+              {
+                defaultMessage:
+                  'A visual representation of the impact of the field on the message rate difference',
+              }
+            )}
+          />
+        </>
       ),
       render: (_, { histogram, fieldName, fieldValue }) => (
         <MiniHistogram
@@ -252,21 +253,27 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate('xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip', {
-            defaultMessage:
-              'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
-          })}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
-              defaultMessage="p-value"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTable.pValueLabel"
+            defaultMessage="p-value"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            position="top"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTable.pValueColumnTooltip',
+              {
+                defaultMessage:
+                  'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
+              }
+            )}
+          />
+        </>
       ),
       render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
       sortable: true,
@@ -278,23 +285,26 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate(
-            'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
-            {
-              defaultMessage: 'The level of impact of the field on the message rate difference.',
-            }
-          )}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
-              defaultMessage="Impact"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTable.impactLabel"
+            defaultMessage="Impact"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            position="top"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTable.impactLabelColumnTooltip',
+              {
+                defaultMessage: 'The level of impact of the field on the message rate difference.',
+              }
+            )}
+          />
+        </>
       ),
       render: (_, { pValue }) => {
         if (typeof pValue !== 'number') return NOT_AVAILABLE;

x-pack/plugins/aiops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx

@@ -15,11 +15,10 @@ import {
   EuiBadge,
   EuiBasicTable,
   EuiButtonIcon,
-  EuiIcon,
   EuiScreenReaderOnly,
   EuiSpacer,
   EuiText,
-  EuiToolTip,
+  EuiIconTip,
   RIGHT_ALIGNMENT,
   useEuiTheme,
   euiPaletteColorBlind,
@@ -176,25 +175,28 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
       'data-test-subj': 'aiopsLogRateAnalysisResultsGroupsTableColumnGroup',
       field: 'group',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate(
-            'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
-            {
-              defaultMessage:
-                'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
-              values: { maxItemCount: MAX_GROUP_BADGES },
-            }
-          )}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
-              defaultMessage="Group"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTableGroups.groupLabel"
+            defaultMessage="Group"
+          />
+          &nbsp;
+          <EuiIconTip
+            position="top"
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTableGroups.groupColumnTooltip',
+              {
+                defaultMessage:
+                  'Displays up to {maxItemCount} group items sorted by uniqueness and document count. Expand row to see all field/value pairs.',
+                values: { maxItemCount: MAX_GROUP_BADGES },
+              }
+            )}
+          />
+        </>
       ),
       render: (_, { uniqueItemsCount, groupItemsSortedByUniqueness }) => {
         const valuesBadges = [];
@@ -262,24 +264,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate(
-            'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
-            {
-              defaultMessage:
-                'A visual representation of the impact of the group on the message rate difference.',
-            }
-          )}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
-              defaultMessage="Log rate"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTableGroups.logRateLabel"
+            defaultMessage="Log rate"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            position="top"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTableGroups.logRateColumnTooltip',
+              {
+                defaultMessage:
+                  'A visual representation of the impact of the group on the message rate difference.',
+              }
+            )}
+          />
+        </>
       ),
       render: (_, { histogram, id }) => (
         <MiniHistogram
@@ -313,24 +318,27 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate(
-            'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
-            {
-              defaultMessage:
-                'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
-            }
-          )}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
-              defaultMessage="p-value"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTableGroups.pValueLabel"
+            defaultMessage="p-value"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            position="top"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTableGroups.pValueColumnTooltip',
+              {
+                defaultMessage:
+                  'The significance of changes in the frequency of values; lower values indicate greater change; sorting this column will automatically do a secondary sort on the doc count column.',
+              }
+            )}
+          />
+        </>
       ),
       render: (pValue: number | null) => pValue?.toPrecision(3) ?? NOT_AVAILABLE,
       sortable: true,
@@ -342,23 +350,26 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
       width: NARROW_COLUMN_WIDTH,
       field: 'pValue',
       name: (
-        <EuiToolTip
-          position="top"
-          content={i18n.translate(
-            'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
-            {
-              defaultMessage: 'The level of impact of the group on the message rate difference',
-            }
-          )}
-        >
-          <>
-            <FormattedMessage
-              id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
-              defaultMessage="Impact"
-            />
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </>
-        </EuiToolTip>
+        <>
+          <FormattedMessage
+            id="xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabel"
+            defaultMessage="Impact"
+          />
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            position="top"
+            content={i18n.translate(
+              'xpack.aiops.logRateAnalysis.resultsTableGroups.impactLabelColumnTooltip',
+              {
+                defaultMessage: 'The level of impact of the group on the message rate difference',
+              }
+            )}
+          />
+        </>
       ),
       render: (_, { pValue }) => {
         if (!pValue) return NOT_AVAILABLE;