feat(fleet): replace title props and wrap EuiButtonIcon with EuiToolTip

x-pack/platform/plugins/shared/fleet/cypress/e2e/fleet_settings_outputs.cy.ts

@@ -436,7 +436,7 @@ queue:
         cy.get(`a[href="/app/fleet/settings/outputs/${kafkaOutputId}"]`)
           .parents('tr')
           .within(() => {
-            cy.get('[title="Delete"]').click();
+            cy.getBySel('deleteOutputBtn').click();
           });
         cy.getBySel(SETTINGS_CONFIRM_MODAL_BTN).click();
         cy.get(`a[href="app/fleet/settings/outputs/${kafkaOutputId}"]`).should('not.exist');

x-pack/platform/plugins/shared/fleet/public/applications/fleet/components/custom_fields/global_data_tags_table.tsx

@@ -11,19 +11,20 @@ import { i18n } from '@kbn/i18n';
 
 import {
   EuiBasicTable,
-  EuiPanel,
-  EuiText,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiButton,
-  EuiFormRow,
-  EuiFieldText,
   EuiButtonIcon,
   EuiCode,
-  EuiSpacer,
   EuiConfirmModal,
-  useGeneratedHtmlId,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiToolTip,
   type EuiBasicTableColumn,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import type { NewAgentPolicy, AgentPolicy, GlobalDataTag } from '../../../../../common/types';
@@ -328,24 +329,28 @@ export const GlobalDataTagsTable: React.FunctionComponent<Props> = ({
               return isEditing || isAddingRow ? (
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      size="xs"
-                      color="primary"
-                      iconType="checkCircleFill"
-                      onClick={isAdding ? confirmNewTagChanges : () => confirmEditChanges(index)}
-                      aria-label="Confirm"
-                    />
+                    <EuiToolTip content="Confirm" disableScreenReaderOutput>
+                      <EuiButtonIcon
+                        size="xs"
+                        color="primary"
+                        iconType="checkCircleFill"
+                        onClick={isAdding ? confirmNewTagChanges : () => confirmEditChanges(index)}
+                        aria-label="Confirm"
+                      />
+                    </EuiToolTip>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               ) : (
-                <EuiButtonIcon
-                  aria-label="Edit"
-                  iconType="pencil"
-                  color="text"
-                  data-test-subj={`globalDataTagEditField${index}Btn`}
-                  isDisabled={isDisabled}
-                  onClick={() => handleStartEdit(index)}
-                />
+                <EuiToolTip content="Edit" disableScreenReaderOutput>
+                  <EuiButtonIcon
+                    aria-label="Edit"
+                    iconType="pencil"
+                    color="text"
+                    data-test-subj={`globalDataTagEditField${index}Btn`}
+                    isDisabled={isDisabled}
+                    onClick={() => handleStartEdit(index)}
+                  />
+                </EuiToolTip>
               );
             },
           },
@@ -359,24 +364,28 @@ export const GlobalDataTagsTable: React.FunctionComponent<Props> = ({
               return isEditing || isAddingRow ? (
                 <EuiFlexGroup alignItems="center" gutterSize="s">
                   <EuiFlexItem grow={false}>
-                    <EuiButtonIcon
-                      size="xs"
-                      color="danger"
-                      iconType="errorFill"
-                      onClick={isAddingRow ? cancelNewTagChanges : () => cancelEditChanges(index)}
-                      aria-label="Cancel"
-                    />
+                    <EuiToolTip content="Cancel" disableScreenReaderOutput>
+                      <EuiButtonIcon
+                        size="xs"
+                        color="danger"
+                        iconType="errorFill"
+                        onClick={isAddingRow ? cancelNewTagChanges : () => cancelEditChanges(index)}
+                        aria-label="Cancel"
+                      />
+                    </EuiToolTip>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               ) : (
-                <EuiButtonIcon
-                  aria-label="Delete"
-                  iconType="trash"
-                  color="text"
-                  data-test-subj={`globalDataTagDeleteField${index}Btn`}
-                  isDisabled={isDisabled}
-                  onClick={() => deleteTag(index)}
-                />
+                <EuiToolTip content="Delete" disableScreenReaderOutput>
+                  <EuiButtonIcon
+                    aria-label="Delete"
+                    iconType="trash"
+                    color="text"
+                    data-test-subj={`globalDataTagDeleteField${index}Btn`}
+                    isDisabled={isDisabled}
+                    onClick={() => deleteTag(index)}
+                  />
+                </EuiToolTip>
               );
             },
           },

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/components/multi_text_input.tsx

@@ -8,13 +8,14 @@ import React, { useCallback, useState, useEffect } from 'react';
 import type { FunctionComponent, ChangeEvent } from 'react';
 
 import {
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiButtonEmpty,
-  EuiFieldText,
-  EuiFieldPassword,
   EuiButtonIcon,
+  EuiFieldPassword,
+  EuiFieldText,
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiSpacer,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -96,19 +97,30 @@ const Row: FunctionComponent<RowProps> = ({
       </EuiFlexItem>
       {isMultiRow && (
         <EuiFlexItem grow={false}>
-          <EuiButtonIcon
-            color="text"
-            onClick={onDeleteHandler}
-            iconType="cross"
-            disabled={isDisabled}
-            aria-label={i18n.translate('xpack.fleet.multiTextInput.deleteRowButton', {
+          <EuiToolTip
+            content={i18n.translate('xpack.fleet.multiTextInput.deleteRowButton', {
               defaultMessage: 'Delete "{fieldLabel}" input {index}',
               values: {
                 fieldLabel,
                 index: index + 1,
               },
             })}
-          />
+            disableScreenReaderOutput
+          >
+            <EuiButtonIcon
+              color="text"
+              onClick={onDeleteHandler}
+              iconType="cross"
+              disabled={isDisabled}
+              aria-label={i18n.translate('xpack.fleet.multiTextInput.deleteRowButton', {
+                defaultMessage: 'Delete "{fieldLabel}" input {index}',
+                values: {
+                  fieldLabel,
+                  index: index + 1,
+                },
+              })}
+            />
+          </EuiToolTip>
         </EuiFlexItem>
       )}
     </EuiFlexGroup>

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/agent_list_page/components/tag_options.tsx

@@ -16,6 +16,7 @@ import {
   EuiLink,
   EuiSpacer,
   EuiText,
+  EuiToolTip,
   EuiWrappingPopover,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -96,17 +97,24 @@ export const TagOptions: React.FC<Props> = ({ tagName, isTagHovered, onTagsUpdat
   return (
     <>
       {tagMenuButtonVisible && (
-        <EuiButtonIcon
-          iconType="boxesVertical"
-          aria-label={i18n.translate('xpack.fleet.tagOptions.tagOptionsToggleButtonLabel', {
+        <EuiToolTip
+          content={i18n.translate('xpack.fleet.tagOptions.tagOptionsToggleButtonLabel', {
             defaultMessage: 'Tag Options',
           })}
-          color="text"
-          onClick={(event: MouseEvent<HTMLButtonElement>) => {
-            setTagOptionsButton(event.currentTarget);
-            setTagOptionsVisible(!tagOptionsVisible);
-          }}
-        />
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            iconType="boxesVertical"
+            aria-label={i18n.translate('xpack.fleet.tagOptions.tagOptionsToggleButtonLabel', {
+              defaultMessage: 'Tag Options',
+            })}
+            color="text"
+            onClick={(event: MouseEvent<HTMLButtonElement>) => {
+              setTagOptionsButton(event.currentTarget);
+              setTagOptionsVisible(!tagOptionsVisible);
+            }}
+          />
+        </EuiToolTip>
       )}
       {tagOptionsVisible && (
         <EuiWrappingPopover

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/components/hierarchical_actions_menu.tsx

@@ -6,7 +6,14 @@
  */
 
 import React, { useMemo, useCallback, useState } from 'react';
-import { EuiPopover, EuiContextMenu, EuiButtonIcon, EuiButton, EuiIcon } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiContextMenu,
+  EuiIcon,
+  EuiPopover,
+  EuiToolTip,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EuiContextMenuPanelDescriptor, IconType, EuiIconProps } from '@elastic/eui';
 
@@ -186,14 +193,21 @@ export const HierarchicalActionsMenu: React.FC<HierarchicalActionsMenuProps> = (
       {button.children}
     </EuiButton>
   ) : (
-    <EuiButtonIcon
-      iconType="boxesVertical"
-      onClick={toggleMenu}
-      aria-label={i18n.translate('xpack.fleet.hierarchicalMenu.openMenuAriaLabel', {
+    <EuiToolTip
+      content={i18n.translate('xpack.fleet.hierarchicalMenu.openMenuAriaLabel', {
         defaultMessage: 'Open menu',
       })}
-      data-test-subj={dataTestSubj || 'hierarchicalMenuButton'}
-    />
+      disableScreenReaderOutput
+    >
+      <EuiButtonIcon
+        iconType="boxesVertical"
+        onClick={toggleMenu}
+        aria-label={i18n.translate('xpack.fleet.hierarchicalMenu.openMenuAriaLabel', {
+          defaultMessage: 'Open menu',
+        })}
+        data-test-subj={dataTestSubj || 'hierarchicalMenuButton'}
+      />
+    </EuiToolTip>
   );
 
   return (

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/agents/enrollment_token_list_page/components/columns.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, EuiTextTruncate } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedDate } from '@kbn/i18n-react';
 
@@ -42,11 +42,7 @@ export const getColumns = ({
     render: (policyId: string) => {
       const agentPolicy = agentPoliciesById[policyId];
       const value = agentPolicy ? agentPolicy.name : policyId;
-      return (
-        <span className="eui-textTruncate" title={value}>
-          {value}
-        </span>
-      );
+      return <EuiTextTruncate text={value} />;
     },
   },
   {

x-pack/platform/plugins/shared/fleet/public/applications/fleet/sections/settings/components/download_source_flyout/download_source_headers.tsx

@@ -15,6 +15,7 @@ import {
   EuiFormRow,
   EuiSpacer,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import React, { useCallback, useMemo, useState } from 'react';
@@ -182,19 +183,29 @@ export const DownloadSourceHeaders: React.FunctionComponent<{
               </EuiFlexItem>
 
               <EuiFlexItem grow={false} style={{ marginTop: index === 0 ? 28 : 0 }}>
-                <EuiButtonIcon
-                  data-test-subj={`downloadSourceHeadersDeleteButton${index}`}
-                  color="text"
-                  onClick={() => deleteKeyValuePair(index)}
-                  iconType="cross"
-                  disabled={deleteButtonDisabled}
-                  aria-label={i18n.translate(
+                <EuiToolTip
+                  content={i18n.translate(
                     'xpack.fleet.settings.editDownloadSourcesFlyout.deleteHeaderButton',
                     {
                       defaultMessage: 'Delete header',
                     }
                   )}
-                />
+                  disableScreenReaderOutput
+                >
+                  <EuiButtonIcon
+                    data-test-subj={`downloadSourceHeadersDeleteButton${index}`}
+                    color="text"
+                    onClick={() => deleteKeyValuePair(index)}
+                    iconType="cross"
+                    disabled={deleteButtonDisabled}
+                    aria-label={i18n.translate(
+                      'xpack.fleet.settings.editDownloadSourcesFlyout.deleteHeaderButton',
+                      {
+                        defaultMessage: 'Delete header',
+                      }
+                    )}
+                  />
+                </EuiToolTip>
               </EuiFlexItem>
             </EuiFlexGroup>
           </div>