Add tooltips for sidebar icon buttons

changelogs/fragments/8216.yml

@@ -0,0 +1,2 @@
+fix:
+- Add tooltips for sidebar icon buttons ([#8216](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8216))

src/core/public/chrome/ui/header/header_help_menu.tsx

@@ -325,18 +325,25 @@ class HeaderHelpMenuUI extends Component<Props, State> {
     }
 
     const button = useUpdatedAppearance ? (
-      <EuiButtonIcon
-        iconType="iInCircle"
-        color="primary"
-        size="xs"
-        aria-expanded={this.state.isOpen}
-        aria-haspopup="true"
-        aria-label={intl.formatMessage({
-          id: 'core.ui.chrome.headerGlobalNav.helpMenuButtonAriaLabel',
-          defaultMessage: 'Help menu',
+      <EuiToolTip
+        content={intl.formatMessage({
+          id: 'core.ui.chrome.headerGlobalNav.helpMenuButtonTitle',
+          defaultMessage: 'Help',
         })}
-        onClick={this.onMenuButtonClick}
-      />
+      >
+        <EuiButtonIcon
+          iconType="iInCircle"
+          color="primary"
+          size="xs"
+          aria-expanded={this.state.isOpen}
+          aria-haspopup="true"
+          aria-label={intl.formatMessage({
+            id: 'core.ui.chrome.headerGlobalNav.helpMenuButtonAriaLabel',
+            defaultMessage: 'Help menu',
+          })}
+          onClick={this.onMenuButtonClick}
+        />
+      </EuiToolTip>
     ) : (
       <EuiToolTip
         content={intl.formatMessage({

src/plugins/dev_tools/public/dev_tools_icon.test.tsx

@@ -12,7 +12,7 @@ describe('<DevToolsIcon />', () => {
   it('should call chrome.navGroup.setCurrentNavGroup and application.navigateToApp methods from core service when click', () => {
     const coreStartMock = coreMock.createStart();
     const { container } = render(<DevToolsIcon core={coreStartMock} appId="foo" />);
-    const component = container.children[0];
+    const component = container.children[0].children[0];
     fireEvent.click(component);
     expect(coreStartMock.application.navigateToApp).toBeCalledWith('foo');
   });

src/plugins/dev_tools/public/dev_tools_icon.tsx

@@ -4,17 +4,24 @@
  */
 
 import React from 'react';
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { CoreStart } from 'opensearch-dashboards/public';
 
 export function DevToolsIcon({ core, appId }: { core: CoreStart; appId: string }) {
   return (
-    <EuiButtonIcon
-      aria-label="go-to-dev-tools"
-      iconType="consoleApp"
-      onClick={() => {
-        core.application.navigateToApp(appId);
-      }}
-    />
+    <EuiToolTip
+      content={i18n.translate('devTools.icon.nav.title', {
+        defaultMessage: 'Developer tools',
+      })}
+    >
+      <EuiButtonIcon
+        aria-label="go-to-dev-tools"
+        iconType="consoleApp"
+        onClick={() => {
+          core.application.navigateToApp(appId);
+        }}
+      />
+    </EuiToolTip>
   );
 }

src/plugins/home/public/application/components/home_icon.test.tsx

@@ -12,7 +12,7 @@ describe('<HomeIcon />', () => {
   it('should call chrome.navGroup.setCurrentNavGroup and application.navigateToApp methods from core service when click', () => {
     const coreStartMock = coreMock.createStart();
     const { container } = render(<HomeIcon core={coreStartMock} appId="foo" />);
-    const component = container.children[0];
+    const component = container.children[0].children[0];
     fireEvent.click(component);
     expect(coreStartMock.application.navigateToApp).toBeCalledWith('foo');
   });

src/plugins/home/public/application/components/home_icon.tsx

@@ -4,17 +4,24 @@
  */
 
 import React from 'react';
-import { EuiButtonIcon } from '@elastic/eui';
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
+import { i18n } from '@osd/i18n';
 
 export function HomeIcon({ core, appId }: { core: CoreStart; appId: string }) {
   return (
-    <EuiButtonIcon
-      aria-label="go-to-home"
-      iconType="home"
-      onClick={() => {
-        core.application.navigateToApp(appId);
-      }}
-    />
+    <EuiToolTip
+      content={i18n.translate('home.icon.nav.title', {
+        defaultMessage: 'Home',
+      })}
+    >
+      <EuiButtonIcon
+        aria-label="go-to-home"
+        iconType="home"
+        onClick={() => {
+          core.application.navigateToApp(appId);
+        }}
+      />
+    </EuiToolTip>
   );
 }

src/plugins/management/public/components/settings_icon.tsx

@@ -4,7 +4,14 @@
  */
 
 import React, { useState, useRef } from 'react';
-import { EuiButtonIcon, EuiContextMenuItem, EuiContextMenuPanel, EuiPopover } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+  EuiToolTip,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { useObservable } from 'react-use';
 import { Observable } from 'rxjs';
@@ -45,11 +52,17 @@ export function SettingsIcon({ core }: { core: CoreStart }) {
     <EuiPopover
       id="popoverForSettingsIcon"
       button={
-        <EuiButtonIcon
-          aria-label="show-apps"
-          iconType="managementApp"
-          onClick={() => setPopover(true)}
-        />
+        <EuiToolTip
+          content={i18n.translate('settings.icon.nav.title', {
+            defaultMessage: 'Settings',
+          })}
+        >
+          <EuiButtonIcon
+            aria-label="show-apps"
+            iconType="managementApp"
+            onClick={() => setPopover(true)}
+          />
+        </EuiToolTip>
       }
       isOpen={isPopoverOpen}
       closePopover={() => setPopover(false)}

src/plugins/workspace/public/components/workspace_menu/workspace_menu.tsx

@@ -17,6 +17,7 @@ import {
   EuiFlexGroup,
   EuiHorizontalRule,
   EuiButtonEmpty,
+  EuiToolTip,
 } from '@elastic/eui';
 import { BehaviorSubject } from 'rxjs';
 import { WORKSPACE_CREATE_APP_ID, WORKSPACE_LIST_APP_ID } from '../../../common/constants';
@@ -71,12 +72,18 @@ export const WorkspaceMenu = ({ coreStart, registeredUseCases$ }: Props) => {
   };
 
   const currentWorkspaceButton = (
-    <EuiButtonIcon
-      iconType="wsSelector"
-      onClick={openPopover}
-      aria-label="workspace-select-button"
-      data-test-subj="workspace-select-button"
-    />
+    <EuiToolTip
+      content={i18n.translate('workspace.icon.menu.title', {
+        defaultMessage: 'Workspaces',
+      })}
+    >
+      <EuiButtonIcon
+        iconType="wsSelector"
+        onClick={openPopover}
+        aria-label="workspace-select-button"
+        data-test-subj="workspace-select-button"
+      />
+    </EuiToolTip>
   );
 
   return (