[EuiToolTip] Replace all title attributes with EuiToolTip

package.json

@@ -143,7 +143,7 @@
     "@elastic/elasticsearch": "9.4.0",
     "@elastic/ems-client": "8.7.0",
     "@elastic/esql": "4.2.0",
-    "@elastic/eui": "116.0.0",
+    "@elastic/eui": "file:./package.tgz",
     "@elastic/eui-theme-borealis": "8.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",

src/core/packages/apps/browser-internal/src/status/components/status_table.tsx

@@ -10,7 +10,13 @@
 import type { FunctionComponent, ReactElement } from 'react';
 import React, { useState } from 'react';
 import type { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiInMemoryTable, EuiIcon, EuiButtonIcon, EuiScreenReaderOnly } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiScreenReaderOnly,
+  EuiToolTip,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { FormattedStatus } from '../lib';
@@ -88,11 +94,16 @@ export const StatusTable: FunctionComponent<StatusTableProps> = ({ statuses }) =
       width: '40px',
       isExpander: true,
       render: (item: FormattedStatus) => (
-        <EuiButtonIcon
-          onClick={() => toggleDetails(item)}
-          aria-label={itemIdToExpandedRowMap[item.id] ? collapseLabel : expandLabel}
-          iconType={itemIdToExpandedRowMap[item.id] ? 'chevronSingleUp' : 'chevronSingleDown'}
-        />
+        <EuiToolTip
+          content={itemIdToExpandedRowMap[item.id] ? collapseLabel : expandLabel}
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            onClick={() => toggleDetails(item)}
+            aria-label={itemIdToExpandedRowMap[item.id] ? collapseLabel : expandLabel}
+            iconType={itemIdToExpandedRowMap[item.id] ? 'chevronSingleUp' : 'chevronSingleDown'}
+          />
+        </EuiToolTip>
       ),
     },
   ];

src/core/packages/chrome/app-menu/core-chrome-app-menu-components/src/components/app_menu_overflow_button.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import { getIsSelectedColor } from '../utils';
@@ -55,19 +55,26 @@ export const AppMenuOverflowButton = ({
   `;
 
   const button = (
-    <EuiButtonIcon
-      iconType="ellipsis"
-      size="s"
-      aria-label={i18n.translate('core.chrome.appMenu.showMoreButtonLabel', {
+    <EuiToolTip
+      content={i18n.translate('core.chrome.appMenu.showMoreButtonLabel', {
         defaultMessage: 'More',
       })}
-      color="text"
-      aria-haspopup="menu"
-      onClick={handleClick}
-      isSelected={isPopoverOpen}
-      css={buttonCss}
-      data-test-subj="app-menu-overflow-button"
-    />
+      disableScreenReaderOutput
+    >
+      <EuiButtonIcon
+        iconType="ellipsis"
+        size="s"
+        aria-label={i18n.translate('core.chrome.appMenu.showMoreButtonLabel', {
+          defaultMessage: 'More',
+        })}
+        color="text"
+        aria-haspopup="menu"
+        onClick={handleClick}
+        isSelected={isPopoverOpen}
+        css={buttonCss}
+        data-test-subj="app-menu-overflow-button"
+      />
+    </EuiToolTip>
   );
 
   return (

src/core/packages/chrome/sidebar/sidebar-components/src/components/sidebar_panel_header.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexItem,
   EuiScreenReaderOnly,
   EuiTitle,
+  EuiToolTip,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { useSidebarPanel } from '@kbn/core-chrome-sidebar-context';
@@ -75,12 +76,14 @@ export const SidebarHeader: FC<SidebarHeaderProps> = ({ title, children, onClose
               {actions && <EuiFlexItem grow={false}>{actions}</EuiFlexItem>}
               {onClose && (
                 <EuiFlexItem grow={false}>
-                  <EuiButtonIcon
-                    iconType="cross"
-                    onClick={onClose}
-                    aria-label={closeSidebarLabel}
-                    color="text"
-                  />
+                  <EuiToolTip content={closeSidebarLabel} disableScreenReaderOutput>
+                    <EuiButtonIcon
+                      iconType="cross"
+                      onClick={onClose}
+                      aria-label={closeSidebarLabel}
+                      color="text"
+                    />
+                  </EuiToolTip>
                 </EuiFlexItem>
               )}
             </EuiFlexGroup>

src/platform/kbn-ui/side-navigation/src/components/collapse_button.tsx

@@ -8,7 +8,7 @@
  */
 
 import type { UseEuiTheme } from '@elastic/eui';
-import { EuiButtonIcon, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
@@ -46,13 +46,8 @@ export const SideNavCollapseButton: FC<Props> = ({ isCollapsed, toggle }) => {
 
   return (
     <div className="sideNavCollapseButtonWrapper" css={styles.sideNavCollapseButtonWrapper}>
-      <EuiButtonIcon
-        data-test-subj="sideNavCollapseButton"
-        css={styles.sideNavCollapseButton}
-        size="s"
-        color="text"
-        iconType={iconType}
-        aria-label={
+      <EuiToolTip
+        content={
           isCollapsed
             ? i18n.translate('kbnUI.sideNavigation.expandButtonLabel', {
                 defaultMessage: 'Expand navigation menu',
@@ -61,11 +56,29 @@ export const SideNavCollapseButton: FC<Props> = ({ isCollapsed, toggle }) => {
                 defaultMessage: 'Collapse navigation menu',
               })
         }
-        aria-pressed={!isCollapsed}
-        aria-expanded={!isCollapsed}
-        aria-controls={PRIMARY_NAVIGATION_ID}
-        onClick={() => toggle(!isCollapsed)}
-      />
+        disableScreenReaderOutput
+      >
+        <EuiButtonIcon
+          data-test-subj="sideNavCollapseButton"
+          css={styles.sideNavCollapseButton}
+          size="s"
+          color="text"
+          iconType={iconType}
+          aria-label={
+            isCollapsed
+              ? i18n.translate('kbnUI.sideNavigation.expandButtonLabel', {
+                  defaultMessage: 'Expand navigation menu',
+                })
+              : i18n.translate('kbnUI.sideNavigation.collapseButtonLabel', {
+                  defaultMessage: 'Collapse navigation menu',
+                })
+          }
+          aria-pressed={!isCollapsed}
+          aria-expanded={!isCollapsed}
+          aria-controls={PRIMARY_NAVIGATION_ID}
+          onClick={() => toggle(!isCollapsed)}
+        />
+      </EuiToolTip>
     </div>
   );
 };

src/platform/kbn-ui/side-navigation/src/components/nested_secondary_menu/header.tsx

@@ -9,7 +9,7 @@
 
 import React from 'react';
 import type { FC } from 'react';
-import { EuiButtonIcon, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { EuiButtonIcon, EuiTitle, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
 
@@ -37,15 +37,22 @@ export const Header: FC<HeaderProps> = ({ title, 'aria-describedby': ariaDescrib
 
   return (
     <div css={titleStyle}>
-      <EuiButtonIcon
-        aria-describedby={ariaDescribedBy}
-        aria-label={i18n.translate('kbnUI.sideNavigation.goBackButtonIconAriaLabel', {
+      <EuiToolTip
+        content={i18n.translate('kbnUI.sideNavigation.goBackButtonIconAriaLabel', {
           defaultMessage: 'Go back',
         })}
-        color="text"
-        iconType="chevronSingleLeft"
-        onClick={goBack}
-      />
+        disableScreenReaderOutput
+      >
+        <EuiButtonIcon
+          aria-describedby={ariaDescribedBy}
+          aria-label={i18n.translate('kbnUI.sideNavigation.goBackButtonIconAriaLabel', {
+            defaultMessage: 'Go back',
+          })}
+          color="text"
+          iconType="chevronSingleLeft"
+          onClick={goBack}
+        />
+      </EuiToolTip>
       {title && (
         <EuiTitle size="xs">
           <h4>{title}</h4>

src/platform/packages/private/kbn-esql-editor/src/editor_footer/esql_starred_queries_service.tsx

@@ -13,7 +13,7 @@ import { v4 as uuidv4 } from 'uuid';
 import type { CoreStart } from '@kbn/core/public';
 import type { UsageCollectionStart } from '@kbn/usage-collection-plugin/public';
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { FavoritesClient, StardustWrapper } from '@kbn/content-management-favorites-public';
 import { FAVORITES_LIMIT as ESQL_STARRED_QUERIES_LIMIT } from '@kbn/content-management-favorites-common';
 import { type QueryHistoryItem, getTrimmedQuery } from '../history_local_storage';
@@ -206,8 +206,8 @@ export class EsqlStarredQueriesService {
       >
         {/* show startdust effect only after starring the query and not on the initial load */}
         <StardustWrapper active={isStarred && trimmedQueryString === this.queryToAdd}>
-          <EuiButtonIcon
-            title={
+          <EuiToolTip
+            content={
               isStarred
                 ? i18n.translate('esqlEditor.query.querieshistory.removeFavoriteTitle', {
                     defaultMessage: 'Remove ES|QL query from Starred',
@@ -216,35 +216,39 @@ export class EsqlStarredQueriesService {
                     defaultMessage: 'Add ES|QL query to Starred',
                   })
             }
-            className={!isStarred ? 'cm-favorite-button--empty' : ''}
-            aria-label={
-              isStarred
-                ? i18n.translate('esqlEditor.query.querieshistory.removeFavoriteTitle', {
-                    defaultMessage: 'Remove ES|QL query from Starred',
-                  })
-                : i18n.translate('esqlEditor.query.querieshistory.addFavoriteTitle', {
-                    defaultMessage: 'Add ES|QL query to Starred',
-                  })
-            }
-            iconType={isStarred ? 'starFill' : 'star'}
-            disabled={!isStarred && this.checkIfStarredQueriesLimitReached()}
-            onClick={async () => {
-              this.queryToEdit = trimmedQueryString;
-              if (isStarred) {
-                // show the discard modal only if the user has not dismissed it
-                if (!this.storage.get(STARRED_QUERIES_DISCARD_KEY)) {
-                  this.discardModalVisibility$.next(true);
+            disableScreenReaderOutput
+          >
+            <EuiButtonIcon
+              className={!isStarred ? 'cm-favorite-button--empty' : ''}
+              aria-label={
+                isStarred
+                  ? i18n.translate('esqlEditor.query.querieshistory.removeFavoriteTitle', {
+                      defaultMessage: 'Remove ES|QL query from Starred',
+                    })
+                  : i18n.translate('esqlEditor.query.querieshistory.addFavoriteTitle', {
+                      defaultMessage: 'Add ES|QL query to Starred',
+                    })
+              }
+              iconType={isStarred ? 'starFill' : 'star'}
+              disabled={!isStarred && this.checkIfStarredQueriesLimitReached()}
+              onClick={async () => {
+                this.queryToEdit = trimmedQueryString;
+                if (isStarred) {
+                  // show the discard modal only if the user has not dismissed it
+                  if (!this.storage.get(STARRED_QUERIES_DISCARD_KEY)) {
+                    this.discardModalVisibility$.next(true);
+                  } else {
+                    await this.removeStarredQuery(item.queryString);
+                  }
                 } else {
-                  await this.removeStarredQuery(item.queryString);
+                  this.queryToAdd = trimmedQueryString;
+                  await this.addStarredQuery(item);
+                  this.queryToAdd = '';
                 }
-              } else {
-                this.queryToAdd = trimmedQueryString;
-                await this.addStarredQuery(item);
-                this.queryToAdd = '';
-              }
-            }}
-            data-test-subj="ESQLFavoriteButton"
-          />
+              }}
+              data-test-subj="ESQLFavoriteButton"
+            />
+          </EuiToolTip>
         </StardustWrapper>
       </TooltipWrapper>
     );

src/platform/packages/private/kbn-esql-editor/src/editor_footer/history_starred_queries.tsx

@@ -321,17 +321,24 @@ export function QueryList({
                   })}
                 >
                   {(copy) => (
-                    <EuiButtonIcon
-                      iconType="copy"
-                      iconSize="m"
-                      onClick={copy}
-                      css={css`
-                        cursor: pointer;
-                      `}
-                      aria-label={i18n.translate('esqlEditor.query.esqlQueriesCopy', {
+                    <EuiToolTip
+                      content={i18n.translate('esqlEditor.query.esqlQueriesCopy', {
                         defaultMessage: 'Copy query to clipboard',
                       })}
-                    />
+                      disableScreenReaderOutput
+                    >
+                      <EuiButtonIcon
+                        iconType="copy"
+                        iconSize="m"
+                        onClick={copy}
+                        css={css`
+                          cursor: pointer;
+                        `}
+                        aria-label={i18n.translate('esqlEditor.query.esqlQueriesCopy', {
+                          defaultMessage: 'Copy query to clipboard',
+                        })}
+                      />
+                    </EuiToolTip>
                   )}
                 </EuiCopy>
               </EuiFlexItem>
@@ -423,12 +430,8 @@ export function QueryColumn({
   return (
     <>
       {isExpandable && (
-        <EuiButtonIcon
-          onClick={() => {
-            setIsRowExpanded(!isRowExpanded);
-          }}
-          data-test-subj="ESQLEditor-queryList-queryString-expanded"
-          aria-label={
+        <EuiToolTip
+          content={
             isRowExpanded
               ? i18n.translate('esqlEditor.query.collapseLabel', {
                   defaultMessage: 'Collapse',
@@ -437,13 +440,30 @@ export function QueryColumn({
                   defaultMessage: 'Expand',
                 })
           }
-          iconType={isRowExpanded ? 'chevronSingleDown' : 'chevronSingleRight'}
-          size="xs"
-          color="text"
-          css={css`
-            flex-shrink: 0;
-          `}
-        />
+          disableScreenReaderOutput
+        >
+          <EuiButtonIcon
+            onClick={() => {
+              setIsRowExpanded(!isRowExpanded);
+            }}
+            data-test-subj="ESQLEditor-queryList-queryString-expanded"
+            aria-label={
+              isRowExpanded
+                ? i18n.translate('esqlEditor.query.collapseLabel', {
+                    defaultMessage: 'Collapse',
+                  })
+                : i18n.translate('esqlEditor.query.expandLabel', {
+                    defaultMessage: 'Expand',
+                  })
+            }
+            iconType={isRowExpanded ? 'chevronSingleDown' : 'chevronSingleRight'}
+            size="xs"
+            color="text"
+            css={css`
+              flex-shrink: 0;
+            `}
+          />
+        </EuiToolTip>
       )}
       <span
         css={css`