fix: [Obs AI Ops > Anomaly Detection][KEYBOARD]: Anomalies table has …

…a number of tooltips that cannot receive keyboard focus (#184198)

Closes: elastic/observability-dev#3397

## Description

The Obs Anomaly Detection Single Metric Viewer has an Anomalies table
with at least three tooltips that cannot be reached by keyboard focus.
Screenshot attached below.

### Steps to recreate
1. Open the [Obs Anomaly
Detection](https://issue-serverless-alpbx-pr180406-c06b1b.kb.eu-west-1.aws.qa.elastic.cloud/app/ml/jobs)
view
2. Create a new anomaly detection job
3. From the Anomaly Detection Jobs table, click the Single Metric Viewer
icon
4. Tab through the page, to the Anomalies table underneath the chart
5. Keep tabbing through the table
6. Verify the tooltips in the Severity, Actual, and Typical columns do
not become visible

x-pack/plugins/ml/public/application/components/anomalies_table/anomalies_table_columns.js

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiToolTip, EuiIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink, EuiScreenReaderOnly, EuiIconTip } from '@elastic/eui';
 
 import React from 'react';
 import { get } from 'lodash';
@@ -116,19 +116,22 @@ export function getColumns(
       field: 'severity',
       'data-test-subj': 'mlAnomaliesListColumnSeverity',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
-            defaultMessage:
-              'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
+            defaultMessage: 'Severity',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.severityColumnName', {
-              defaultMessage: 'Severity',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableSeverityTooltip', {
+              defaultMessage:
+                'A normalized score between 0-100, which indicates the relative significance of the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (score, item) => (
         <SeverityCell score={score} isMultiBucketAnomaly={isMultiBucketAnomaly(item.source)} />
@@ -196,18 +199,21 @@ export function getColumns(
       field: 'actualSort',
       'data-test-subj': 'mlAnomaliesListColumnActual',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
-            defaultMessage: 'The actual values in the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
+            defaultMessage: 'Actual',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.actualSortColumnName', {
-              defaultMessage: 'Actual',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableActualTooltip', {
+              defaultMessage: 'The actual values in the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (actual, item) => {
         const fieldFormat = mlFieldFormatService.getFieldFormat(
@@ -226,18 +232,21 @@ export function getColumns(
       field: 'typicalSort',
       'data-test-subj': 'mlAnomaliesListColumnTypical',
       name: (
-        <EuiToolTip
-          content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
-            defaultMessage: 'The typical values in the anomaly record results.',
+        <span>
+          {i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
+            defaultMessage: 'Typical',
           })}
-        >
-          <span>
-            {i18n.translate('xpack.ml.anomaliesTable.typicalSortColumnName', {
-              defaultMessage: 'Typical',
+          &nbsp;
+          <EuiIconTip
+            size="s"
+            color="subdued"
+            type="questionInCircle"
+            className="eui-alignTop"
+            content={i18n.translate('xpack.ml.overview.anomalyDetection.tableTypicalTooltip', {
+              defaultMessage: 'The typical values in the anomaly record results.',
             })}
-            <EuiIcon size="s" color="subdued" type="questionInCircle" className="eui-alignTop" />
-          </span>
-        </EuiToolTip>
+          />
+        </span>
       ),
       render: (typical, item) => {
         const fieldFormat = mlFieldFormatService.getFieldFormat(