feat(kibana-presentation): replace title props and wrap EuiButtonIcon with EuiToolTip

src/platform/packages/private/kbn-grid-layout/grid/grid_section/grid_section_header.tsx

@@ -11,7 +11,7 @@ import { cloneDeep } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { distinctUntilChanged, filter, map, pairwise } from 'rxjs';
 
-import { type UseEuiTheme, transparentize } from '@elastic/eui';
+import { EuiToolTip, transparentize, type UseEuiTheme } from '@elastic/eui';
 import {
   EuiButtonIcon,
   EuiIcon,
@@ -307,16 +307,23 @@ export const GridSectionHeader = React.memo(({ sectionId }: GridSectionHeaderPro
                 <>
                   {!isActive && (
                     <EuiFlexItem grow={false} css={[styles.floatToRight]}>
-                      <EuiButtonIcon
-                        data-no-drag
-                        iconType="trash"
-                        color="danger"
-                        className="kbnGridLayout--deleteSectionIcon"
-                        onClick={confirmDeleteSection}
-                        aria-label={i18n.translate('kbnGridLayout.section.deleteSection', {
+                      <EuiToolTip
+                        content={i18n.translate('kbnGridLayout.section.deleteSection', {
                           defaultMessage: 'Delete section',
                         })}
-                      />
+                        disableScreenReaderOutput
+                      >
+                        <EuiButtonIcon
+                          data-no-drag
+                          iconType="trash"
+                          color="danger"
+                          className="kbnGridLayout--deleteSectionIcon"
+                          onClick={confirmDeleteSection}
+                          aria-label={i18n.translate('kbnGridLayout.section.deleteSection', {
+                            defaultMessage: 'Delete section',
+                          })}
+                        />
+                      </EuiToolTip>
                     </EuiFlexItem>
                   )}
                   <EuiFlexItem

src/platform/packages/private/kbn-grid-layout/grid/grid_section/grid_section_title.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexItem,
   EuiInlineEditTitle,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -160,16 +161,23 @@ export const GridSectionTitle = React.memo(
           <>
             {!readOnly && (
               <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  data-no-drag
-                  iconType="pencil"
-                  onClick={() => setEditTitleOpen(true)}
-                  color="text"
-                  aria-label={i18n.translate('kbnGridLayout.section.editTitleAriaLabel', {
+                <EuiToolTip
+                  content={i18n.translate('kbnGridLayout.section.editTitleAriaLabel', {
                     defaultMessage: 'Edit section title',
                   })}
-                  data-test-subj={`kbnGridSectionTitle-${sectionId}--edit`}
-                />
+                  disableScreenReaderOutput
+                >
+                  <EuiButtonIcon
+                    data-no-drag
+                    iconType="pencil"
+                    onClick={() => setEditTitleOpen(true)}
+                    color="text"
+                    aria-label={i18n.translate('kbnGridLayout.section.editTitleAriaLabel', {
+                      defaultMessage: 'Edit section title',
+                    })}
+                    data-test-subj={`kbnGridSectionTitle-${sectionId}--edit`}
+                  />
+                </EuiToolTip>
               </EuiFlexItem>
             )}
           </>

src/platform/packages/shared/kbn-cps-utils/components/project_picker_settings.tsx

@@ -8,7 +8,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiButtonIcon, EuiPopover, EuiContextMenu } from '@elastic/eui';
+import { EuiButtonIcon, EuiContextMenu, EuiPopover, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { strings } from './strings';
 
@@ -52,14 +52,16 @@ export const ProjectPickerSettings = ({ onResetToDefaults }: ProjectPickerSettin
   return (
     <EuiPopover
       button={
-        <EuiButtonIcon
-          display="empty"
-          iconType="ellipsis"
-          aria-label={strings.getManageCrossProjectSearchLabel()}
-          onClick={() => setIsOpen(!isOpen)}
-          size="s"
-          color="text"
-        />
+        <EuiToolTip content={strings.getManageCrossProjectSearchLabel()} disableScreenReaderOutput>
+          <EuiButtonIcon
+            display="empty"
+            iconType="ellipsis"
+            aria-label={strings.getManageCrossProjectSearchLabel()}
+            onClick={() => setIsOpen(!isOpen)}
+            size="s"
+            color="text"
+          />
+        </EuiToolTip>
       }
       isOpen={isOpen}
       closePopover={closePopover}

src/platform/plugins/private/input_control_vis/public/components/editor/control_editor.tsx

@@ -22,6 +22,7 @@ import {
   EuiFormRow,
   EuiPanel,
   EuiSpacer,
+  EuiToolTip,
 } from '@elastic/eui';
 
 import type { DataView } from '@kbn/data-views-plugin/public';
@@ -136,36 +137,60 @@ class ControlEditorUi extends PureComponent<ControlEditorUiProps & WrappedCompon
   renderEditorButtons() {
     return (
       <div>
-        <EuiButtonIcon
-          aria-label={this.props.intl.formatMessage({
+        <EuiToolTip
+          content={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.moveControlUpAriaLabel',
             defaultMessage: 'Move control up',
           })}
-          color="primary"
-          onClick={this.moveUpControl}
-          iconType="sortUp"
-          data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
-        />
-        <EuiButtonIcon
-          aria-label={this.props.intl.formatMessage({
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            aria-label={this.props.intl.formatMessage({
+              id: 'inputControl.editor.controlEditor.moveControlUpAriaLabel',
+              defaultMessage: 'Move control up',
+            })}
+            color="primary"
+            onClick={this.moveUpControl}
+            iconType="sortUp"
+            data-test-subj={`inputControlEditorMoveUpControl${this.props.controlIndex}`}
+          />
+        </EuiToolTip>
+        <EuiToolTip
+          content={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.moveControlDownAriaLabel',
             defaultMessage: 'Move control down',
           })}
-          color="primary"
-          onClick={this.moveDownControl}
-          iconType="sortDown"
-          data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
-        />
-        <EuiButtonIcon
-          aria-label={this.props.intl.formatMessage({
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            aria-label={this.props.intl.formatMessage({
+              id: 'inputControl.editor.controlEditor.moveControlDownAriaLabel',
+              defaultMessage: 'Move control down',
+            })}
+            color="primary"
+            onClick={this.moveDownControl}
+            iconType="sortDown"
+            data-test-subj={`inputControlEditorMoveDownControl${this.props.controlIndex}`}
+          />
+        </EuiToolTip>
+        <EuiToolTip
+          content={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.removeControlAriaLabel',
             defaultMessage: 'Remove control',
           })}
-          color="danger"
-          onClick={this.removeControl}
-          iconType="cross"
-          data-test-subj={`inputControlEditorRemoveControl${this.props.controlIndex}`}
-        />
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            aria-label={this.props.intl.formatMessage({
+              id: 'inputControl.editor.controlEditor.removeControlAriaLabel',
+              defaultMessage: 'Remove control',
+            })}
+            color="danger"
+            onClick={this.removeControl}
+            iconType="cross"
+            data-test-subj={`inputControlEditorRemoveControl${this.props.controlIndex}`}
+          />
+        </EuiToolTip>
       </div>
     );
   }

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/components/options_list_popover_sorting_button.tsx

@@ -105,17 +105,22 @@ export const OptionsListPopoverSortingButton = ({
   );
 
   const SortButton = () => (
-    <EuiButtonIcon
-      size="xs"
-      display="empty"
-      color="text"
-      iconType={sort?.direction === 'asc' ? 'sortAscending' : 'sortDescending'}
-      isDisabled={showOnlySelected}
-      className="optionsList__sortButton"
-      data-test-subj="optionsListControl__sortingOptionsButton"
-      onClick={() => setIsSortingPopoverOpen(!isSortingPopoverOpen)}
-      aria-label={OptionsListStrings.popover.getSortPopoverDescription()}
-    />
+    <EuiToolTip
+      content={OptionsListStrings.popover.getSortPopoverDescription()}
+      disableScreenReaderOutput
+    >
+      <EuiButtonIcon
+        size="xs"
+        display="empty"
+        color="text"
+        iconType={sort?.direction === 'asc' ? 'sortAscending' : 'sortDescending'}
+        isDisabled={showOnlySelected}
+        className="optionsList__sortButton"
+        data-test-subj="optionsListControl__sortingOptionsButton"
+        onClick={() => setIsSortingPopoverOpen(!isSortingPopoverOpen)}
+        aria-label={OptionsListStrings.popover.getSortPopoverDescription()}
+      />
+    </EuiToolTip>
   );
 
   return (

src/platform/plugins/shared/controls/public/controls/timeslider_control/components/play_button.tsx

@@ -33,15 +33,20 @@ export function PlayButton(props: Props) {
   }
 
   const Button = (
-    <EuiButtonIcon
-      onClick={props.isPaused ? props.onPlay : props.onPause}
-      disabled={props.disablePlayButton}
-      iconType={props.isPaused ? 'play' : 'pause'}
-      size="s"
-      display="fill"
-      aria-label={TimeSliderStrings.control.getPlayButtonAriaLabel(props.isPaused)}
-      css={styles.icon}
-    />
+    <EuiToolTip
+      content={TimeSliderStrings.control.getPlayButtonAriaLabel(props.isPaused)}
+      disableScreenReaderOutput
+    >
+      <EuiButtonIcon
+        onClick={props.isPaused ? props.onPlay : props.onPause}
+        disabled={props.disablePlayButton}
+        iconType={props.isPaused ? 'play' : 'pause'}
+        size="s"
+        display="fill"
+        aria-label={TimeSliderStrings.control.getPlayButtonAriaLabel(props.isPaused)}
+        css={styles.icon}
+      />
+    </EuiToolTip>
   );
   return props.disablePlayButton ? (
     <EuiToolTip display="block" content={TimeSliderStrings.control.getPlayButtonDisabledTooltip()}>

src/platform/plugins/shared/controls/public/controls/timeslider_control/components/time_slider_prepend.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiButtonIcon, EuiFlexItem } from '@elastic/eui';
+import { EuiButtonIcon, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import type { ViewMode } from '@kbn/presentation-publishing';
 import type { FC } from 'react';
 import React, { useCallback, useState } from 'react';
@@ -70,16 +70,21 @@ export const TimeSliderPrepend: FC<Props> = (props: Props) => {
   return (
     <>
       <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          onClick={() => {
-            onPause();
-            props.onPrevious();
-          }}
-          iconType="chevronLimitLeft"
-          color="text"
-          aria-label={TimeSliderStrings.control.getPreviousButtonAriaLabel()}
-          data-test-subj="timeSlider-previousTimeWindow"
-        />
+        <EuiToolTip
+          content={TimeSliderStrings.control.getPreviousButtonAriaLabel()}
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            onClick={() => {
+              onPause();
+              props.onPrevious();
+            }}
+            iconType="chevronLimitLeft"
+            color="text"
+            aria-label={TimeSliderStrings.control.getPreviousButtonAriaLabel()}
+            data-test-subj="timeSlider-previousTimeWindow"
+          />
+        </EuiToolTip>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <PlayButton
@@ -92,16 +97,21 @@ export const TimeSliderPrepend: FC<Props> = (props: Props) => {
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButtonIcon
-          onClick={() => {
-            onPause();
-            props.onNext();
-          }}
-          iconType="chevronLimitRight"
-          color="text"
-          aria-label={TimeSliderStrings.control.getNextButtonAriaLabel()}
-          data-test-subj="timeSlider-nextTimeWindow"
-        />
+        <EuiToolTip
+          content={TimeSliderStrings.control.getNextButtonAriaLabel()}
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            onClick={() => {
+              onPause();
+              props.onNext();
+            }}
+            iconType="chevronLimitRight"
+            color="text"
+            aria-label={TimeSliderStrings.control.getNextButtonAriaLabel()}
+            data-test-subj="timeSlider-nextTimeWindow"
+          />
+        </EuiToolTip>
       </EuiFlexItem>
     </>
   );

src/platform/plugins/shared/dashboard/public/dashboard_actions/filters_notification_popover.tsx

@@ -19,6 +19,7 @@ import {
   EuiFormRow,
   EuiPopover,
   EuiPopoverFooter,
+  EuiToolTip,
 } from '@elastic/eui';
 
 import { css } from '@emotion/react';
@@ -97,18 +98,20 @@ export function FiltersNotificationPopover({ api }: { api: FiltersNotificationAc
   return (
     <EuiPopover
       button={
-        <EuiButtonIcon
-          color="text"
-          iconType={'filter'}
-          onClick={() => {
-            setIsPopoverOpen(!isPopoverOpen);
-            if (apiCanLockHoverActions(api)) {
-              api?.lockHoverActions(!api.hasLockedHoverActions$.value);
-            }
-          }}
-          data-test-subj={`embeddablePanelNotification-${api.uuid}`}
-          aria-label={displayName}
-        />
+        <EuiToolTip content={displayName} disableScreenReaderOutput>
+          <EuiButtonIcon
+            color="text"
+            iconType={'filter'}
+            onClick={() => {
+              setIsPopoverOpen(!isPopoverOpen);
+              if (apiCanLockHoverActions(api)) {
+                api?.lockHoverActions(!api.hasLockedHoverActions$.value);
+              }
+            }}
+            data-test-subj={`embeddablePanelNotification-${api.uuid}`}
+            aria-label={displayName}
+          />
+        </EuiToolTip>
       }
       isOpen={isPopoverOpen}
       closePopover={closePopover}