diff --git a/.changeset/five-pillows-fail.md b/.changeset/five-pillows-fail.md
index bae5935e230..e98c1fdc646 100644
--- a/.changeset/five-pillows-fail.md
+++ b/.changeset/five-pillows-fail.md
@@ -3,7 +3,7 @@
 ---
 
 Add new components:
-- UI components (`Button`, `ButtonGroup`, `Dialog`, `Menu`, `Spinner`, `Tab`, `Tabs`, `UnStyledButton` and lots of icon components)
+- UI components (`Button`, `ButtonGroup`, `Dialog`, `Menu`, `Spinner`, `Tab`, `Tabs`, `Tooltip`, `UnStyledButton` and lots of icon components)
 - Editor components (`QueryEditor`, `VariableEditor`, `HeaderEditor` and `ResponseEditor`)
 - Toolbar components (`ExecuteButton`, `ToolbarButton`, `ToolbarMenu` and `ToolbarSelect`)
 - Docs components (`Argument`, `DefaultValue`, `DeprecationReason`, `Directive`, `DocExplorer`, `ExplorerSection`, `FieldDocumentation`, `FieldLink`, `SchemaDocumentation`, `Search`, `TypeDocumentation` and `TypeLink`)
diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
index a1b207db345..140f0ebe6f4 100644
--- a/packages/graphiql-react/package.json
+++ b/packages/graphiql-react/package.json
@@ -42,6 +42,7 @@
     "@reach/dialog": "^0.17.0",
     "@reach/listbox": "^0.17.0",
     "@reach/menu-button": "^0.17.0",
+    "@reach/tooltip": "^0.17.0",
     "@reach/visually-hidden": "^0.17.0",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.0-next.1",
diff --git a/packages/graphiql-react/src/history/__tests__/components.spec.tsx b/packages/graphiql-react/src/history/__tests__/components.spec.tsx
index 9366c4b67bc..180287b0175 100644
--- a/packages/graphiql-react/src/history/__tests__/components.spec.tsx
+++ b/packages/graphiql-react/src/history/__tests__/components.spec.tsx
@@ -118,10 +118,10 @@ describe('QueryHistoryItem', () => {
   });
 
   it('renders label input if the edit label button is clicked', () => {
-    const { container, getByTitle } = render(
+    const { container, getByLabelText } = render(
       <QueryHistoryItemWithContext {...getMockProps()} />,
     );
-    fireEvent.click(getByTitle('Edit label'));
+    fireEvent.click(getByLabelText('Edit label'));
     expect(container.querySelectorAll('li.editable').length).toBe(1);
     expect(container.querySelectorAll('input').length).toBe(1);
     expect(
diff --git a/packages/graphiql-react/src/history/components.tsx b/packages/graphiql-react/src/history/components.tsx
index 921e0a68523..ab6ad9efaff 100644
--- a/packages/graphiql-react/src/history/components.tsx
+++ b/packages/graphiql-react/src/history/components.tsx
@@ -3,7 +3,7 @@ import { Fragment, useEffect, useRef, useState } from 'react';
 
 import { useEditorContext } from '../editor';
 import { CloseIcon, PenIcon, StarFilledIcon, StarIcon } from '../icons';
-import { UnStyledButton } from '../ui';
+import { Tooltip, UnStyledButton } from '../ui';
 import { useHistoryContext } from './context';
 
 import './style.css';
@@ -112,24 +112,35 @@ export function HistoryItem(props: QueryHistoryItemProps) {
             }}>
             {displayName}
           </UnStyledButton>
-          <UnStyledButton
-            className="graphiql-history-item-action"
-            title="Edit label"
-            onClick={e => {
-              e.stopPropagation();
-              setIsEditable(true);
-            }}>
-            <PenIcon />
-          </UnStyledButton>
-          <UnStyledButton
-            className="graphiql-history-item-action"
-            onClick={e => {
-              e.stopPropagation();
-              toggleFavorite(props.item);
-            }}
-            title={props.item.favorite ? 'Remove favorite' : 'Add favorite'}>
-            {props.item.favorite ? <StarFilledIcon /> : <StarIcon />}
-          </UnStyledButton>
+          <Tooltip label="Edit label">
+            <UnStyledButton
+              className="graphiql-history-item-action"
+              onClick={e => {
+                e.stopPropagation();
+                setIsEditable(true);
+              }}
+              aria-label="Edit label">
+              <PenIcon aria-hidden="true" />
+            </UnStyledButton>
+          </Tooltip>
+          <Tooltip
+            label={props.item.favorite ? 'Remove favorite' : 'Add favorite'}>
+            <UnStyledButton
+              className="graphiql-history-item-action"
+              onClick={e => {
+                e.stopPropagation();
+                toggleFavorite(props.item);
+              }}
+              aria-label={
+                props.item.favorite ? 'Remove favorite' : 'Add favorite'
+              }>
+              {props.item.favorite ? (
+                <StarFilledIcon aria-hidden="true" />
+              ) : (
+                <StarIcon aria-hidden="true" />
+              )}
+            </UnStyledButton>
+          </Tooltip>
         </>
       )}
     </li>
diff --git a/packages/graphiql-react/src/history/style.css b/packages/graphiql-react/src/history/style.css
index ac0ebe2c1c6..c28a3d46df8 100644
--- a/packages/graphiql-react/src/history/style.css
+++ b/packages/graphiql-react/src/history/style.css
@@ -81,7 +81,6 @@ button.graphiql-history-item-action {
 
   & > svg {
     height: 14px;
-    pointer-events: none;
     width: 14px;
   }
 }
diff --git a/packages/graphiql-react/src/toolbar/button.css b/packages/graphiql-react/src/toolbar/button.css
index 83baae4c3c7..bfab9965976 100644
--- a/packages/graphiql-react/src/toolbar/button.css
+++ b/packages/graphiql-react/src/toolbar/button.css
@@ -6,8 +6,4 @@ button.graphiql-toolbar-button {
   &.error {
     background: var(--color-red-background);
   }
-
-  & > svg {
-    pointer-events: none;
-  }
 }
diff --git a/packages/graphiql-react/src/toolbar/button.tsx b/packages/graphiql-react/src/toolbar/button.tsx
index c3a1969f273..e4f4fc5cb99 100644
--- a/packages/graphiql-react/src/toolbar/button.tsx
+++ b/packages/graphiql-react/src/toolbar/button.tsx
@@ -1,39 +1,44 @@
 import { forwardRef, useState } from 'react';
-
-import { UnStyledButton } from '../ui';
+import { Tooltip, UnStyledButton } from '../ui';
 import { compose } from '../utility/compose';
 
 import './button.css';
 
+type ToolbarButtonProps = {
+  label: string;
+};
+
 export const ToolbarButton = forwardRef<
   HTMLButtonElement,
-  JSX.IntrinsicElements['button']
->((props, ref) => {
+  ToolbarButtonProps & JSX.IntrinsicElements['button']
+>(({ label, ...props }, ref) => {
   const [error, setError] = useState<Error | null>(null);
   return (
-    <UnStyledButton
-      {...props}
-      ref={ref}
-      className={compose(
-        'graphiql-toolbar-button',
-        error ? 'error' : '',
-        props.className,
-      )}
-      onClick={event => {
-        try {
-          props.onClick?.(event);
-          setError(null);
-        } catch (err) {
-          setError(
-            err instanceof Error
-              ? err
-              : new Error(`Toolbar button click failed: ${err}`),
-          );
-        }
-      }}
-      title={error ? error.message : props.title}
-      aria-invalid={error ? 'true' : props['aria-invalid']}
-    />
+    <Tooltip label={label}>
+      <UnStyledButton
+        {...props}
+        ref={ref}
+        className={compose(
+          'graphiql-toolbar-button',
+          error ? 'error' : '',
+          props.className,
+        )}
+        onClick={event => {
+          try {
+            props.onClick?.(event);
+            setError(null);
+          } catch (err) {
+            setError(
+              err instanceof Error
+                ? err
+                : new Error(`Toolbar button click failed: ${err}`),
+            );
+          }
+        }}
+        aria-label={error ? error.message : label}
+        aria-invalid={error ? 'true' : props['aria-invalid']}
+      />
+    </Tooltip>
   );
 });
 ToolbarButton.displayName = 'ToolbarButton';
diff --git a/packages/graphiql-react/src/toolbar/execute.css b/packages/graphiql-react/src/toolbar/execute.css
index e1b415a92b3..9e7d4f95aaa 100644
--- a/packages/graphiql-react/src/toolbar/execute.css
+++ b/packages/graphiql-react/src/toolbar/execute.css
@@ -24,7 +24,6 @@ button.graphiql-execute-button {
     display: block;
     height: var(--px-16);
     margin: auto;
-    pointer-events: none;
     width: var(--px-16);
   }
 }
diff --git a/packages/graphiql-react/src/toolbar/execute.tsx b/packages/graphiql-react/src/toolbar/execute.tsx
index 306bdbd0760..9bb219230c2 100644
--- a/packages/graphiql-react/src/toolbar/execute.tsx
+++ b/packages/graphiql-react/src/toolbar/execute.tsx
@@ -1,7 +1,7 @@
 import { useEditorContext } from '../editor';
 import { useExecutionContext } from '../execution';
 import { PlayIcon, StopIcon } from '../icons';
-import { Menu } from '../ui';
+import { Menu, Tooltip } from '../ui';
 
 import './execute.css';
 
@@ -19,16 +19,20 @@ export function ExecuteButton() {
   const operations = queryEditor?.operations || [];
   const hasOptions = operations.length > 1;
 
+  const label = 'Execute Query (Ctrl-Enter)';
   const buttonProps = {
     type: 'button' as const,
     className: 'graphiql-execute-button',
-    title: 'Execute Query (Ctrl-Enter)',
     children: isRunning ? <StopIcon /> : <PlayIcon />,
+    'aria-label': label,
   };
 
   return hasOptions ? (
     <Menu>
-      <Menu.Button {...buttonProps} />
+      <Tooltip label="Execute Query (Ctrl-Enter)">
+        <Menu.Button {...buttonProps} />
+      </Tooltip>
+
       <Menu.List>
         {operations.map((operation, i) => {
           const opName = operation.name
diff --git a/packages/graphiql-react/src/toolbar/listbox.tsx b/packages/graphiql-react/src/toolbar/listbox.tsx
index 863da63613f..45eecdcbdeb 100644
--- a/packages/graphiql-react/src/toolbar/listbox.tsx
+++ b/packages/graphiql-react/src/toolbar/listbox.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, forwardRef, ReactNode } from 'react';
-import { Listbox } from '../ui';
+import { Listbox, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
 import { compose } from '../utility/compose';
 
@@ -7,20 +7,27 @@ import './listbox.css';
 
 type ToolbarListboxProps = {
   button: ReactNode;
+  label: string;
 };
 
 const ToolbarListboxRoot = forwardRef<
   HTMLDivElement,
   ToolbarListboxProps & ComponentProps<typeof Listbox.Input>
->(({ button, children, ...props }, ref) => (
-  <Listbox.Input
-    {...props}
-    ref={ref}
-    className={compose('graphiql-toolbar-listbox', props.className)}>
-    <Listbox.Button>{button}</Listbox.Button>
-    <Listbox.Popover>{children}</Listbox.Popover>
-  </Listbox.Input>
-));
+>(({ button, children, label, ...props }, ref) => {
+  const labelWithValue = `${label}${props.value ? `: ${props.value}` : ''}`;
+  return (
+    <Listbox.Input
+      {...props}
+      ref={ref}
+      className={compose('graphiql-toolbar-listbox', props.className)}
+      aria-label={labelWithValue}>
+      <Tooltip label={labelWithValue}>
+        <Listbox.Button>{button}</Listbox.Button>
+      </Tooltip>
+      <Listbox.Popover>{children}</Listbox.Popover>
+    </Listbox.Input>
+  );
+});
 ToolbarListboxRoot.displayName = 'ToolbarListbox';
 
 export const ToolbarListbox = createComponentGroup(ToolbarListboxRoot, {
diff --git a/packages/graphiql-react/src/toolbar/menu.tsx b/packages/graphiql-react/src/toolbar/menu.tsx
index f67aab27612..112ee97aa20 100644
--- a/packages/graphiql-react/src/toolbar/menu.tsx
+++ b/packages/graphiql-react/src/toolbar/menu.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, ReactNode } from 'react';
-import { Menu } from '../ui';
+import { Menu, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
 import { compose } from '../utility/compose';
 
@@ -7,20 +7,24 @@ import './menu.css';
 
 type ToolbarMenuProps = {
   button: ReactNode;
+  label: string;
 };
 
 const ToolbarMenuRoot = forwardRef<
   HTMLDivElement,
   ToolbarMenuProps & JSX.IntrinsicElements['div']
->(({ button, children, ...props }, ref) => (
+>(({ button, children, label, ...props }, ref) => (
   <Menu {...props} ref={ref}>
-    <Menu.Button
-      className={compose(
-        'graphiql-un-styled graphiql-toolbar-menu',
-        props.className,
-      )}>
-      {button}
-    </Menu.Button>
+    <Tooltip label={label}>
+      <Menu.Button
+        className={compose(
+          'graphiql-un-styled graphiql-toolbar-menu',
+          props.className,
+        )}
+        aria-label={label}>
+        {button}
+      </Menu.Button>
+    </Tooltip>
     <Menu.List>{children}</Menu.List>
   </Menu>
 ));
diff --git a/packages/graphiql-react/src/ui/index.ts b/packages/graphiql-react/src/ui/index.ts
index a79f28f1edc..a0559b7103d 100644
--- a/packages/graphiql-react/src/ui/index.ts
+++ b/packages/graphiql-react/src/ui/index.ts
@@ -5,3 +5,4 @@ export * from './dropdown';
 export * from './markdown';
 export * from './spinner';
 export * from './tabs';
+export * from './tooltip';
diff --git a/packages/graphiql-react/src/ui/tabs.tsx b/packages/graphiql-react/src/ui/tabs.tsx
index fae6265a384..4ad6db1de8e 100644
--- a/packages/graphiql-react/src/ui/tabs.tsx
+++ b/packages/graphiql-react/src/ui/tabs.tsx
@@ -3,6 +3,7 @@ import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
 import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
+import { Tooltip } from './tooltip';
 
 import './tabs.css';
 
@@ -45,15 +46,16 @@ TabButton.displayName = 'Tab.Button';
 
 const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
   (props, ref) => (
-    <UnStyledButton
-      aria-label="Close Tab"
-      title="Close Tab"
-      {...props}
-      ref={ref}
-      type="button"
-      className={compose('graphiql-tab-close', props.className)}>
-      <CloseIcon />
-    </UnStyledButton>
+    <Tooltip label="Close Tab">
+      <UnStyledButton
+        aria-label="Close Tab"
+        {...props}
+        ref={ref}
+        type="button"
+        className={compose('graphiql-tab-close', props.className)}>
+        <CloseIcon />
+      </UnStyledButton>
+    </Tooltip>
   ),
 );
 TabClose.displayName = 'Tab.Close';
diff --git a/packages/graphiql-react/src/ui/tooltip.css b/packages/graphiql-react/src/ui/tooltip.css
new file mode 100644
index 00000000000..71dec461e7a
--- /dev/null
+++ b/packages/graphiql-react/src/ui/tooltip.css
@@ -0,0 +1,10 @@
+@import url('@reach/tooltip/styles.css');
+
+[data-reach-tooltip] {
+  background: var(--color-neutral-7);
+  border: none;
+  border-radius: var(--border-radius-4);
+  box-shadow: var(--box-shadow);
+  font-size: inherit;
+  padding: var(--px-6) var(--px-4);
+}
diff --git a/packages/graphiql-react/src/ui/tooltip.tsx b/packages/graphiql-react/src/ui/tooltip.tsx
new file mode 100644
index 00000000000..bc156c6213d
--- /dev/null
+++ b/packages/graphiql-react/src/ui/tooltip.tsx
@@ -0,0 +1,3 @@
+import './tooltip.css';
+
+export { Tooltip } from '@reach/tooltip';
diff --git a/packages/graphiql/__mocks__/@graphiql/react.tsx b/packages/graphiql/__mocks__/@graphiql/react.tsx
index cbcc24f67f6..92c6a079022 100644
--- a/packages/graphiql/__mocks__/@graphiql/react.tsx
+++ b/packages/graphiql/__mocks__/@graphiql/react.tsx
@@ -31,7 +31,6 @@ export {
   DirectiveIcon,
   DocExplorer,
   DocsIcon,
-  Dropdown,
   EditorContext,
   EditorContextProvider,
   EnumValueIcon,
@@ -51,8 +50,10 @@ export {
   ImagePreview,
   ImplementsIcon,
   KeyboardShortcutIcon,
+  Listbox,
   MagnifyingGlassIcon,
   MarkdownContent,
+  Menu,
   MergeIcon,
   onHasCompletion,
   PenIcon,
@@ -75,6 +76,9 @@ export {
   Tab,
   Tabs,
   ToolbarButton,
+  ToolbarListbox,
+  ToolbarMenu,
+  Tooltip,
   TypeDocumentation,
   TypeIcon,
   TypeLink,
diff --git a/packages/graphiql/cypress/support/commands.ts b/packages/graphiql/cypress/support/commands.ts
index 5c98014e957..bb4c69d307a 100644
--- a/packages/graphiql/cypress/support/commands.ts
+++ b/packages/graphiql/cypress/support/commands.ts
@@ -56,7 +56,7 @@ Cypress.Commands.add('clickExecuteQuery', () => {
 });
 
 Cypress.Commands.add('clickPrettify', () => {
-  return cy.get('[title="Prettify Query (Shift-Ctrl-P)"]').click();
+  return cy.get('[aria-label="Prettify Query (Shift-Ctrl-P)"]').click();
 });
 
 Cypress.Commands.add('visitWithOp', ({ query, variables, variablesString }) => {
diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
index 95732a1353d..91bb1329980 100644
--- a/packages/graphiql/src/components/GraphiQL.tsx
+++ b/packages/graphiql/src/components/GraphiQL.tsx
@@ -62,6 +62,7 @@ import {
   TabsState,
   Theme,
   ToolbarButton,
+  Tooltip,
   UnStyledButton,
   useAutoCompleteLeafs,
   useCopyQuery,
@@ -644,25 +645,22 @@ class GraphiQLWithContext extends React.Component<
           onClick={() => {
             this.props.prettify();
           }}
-          title="Prettify Query (Shift-Ctrl-P)"
-          aria-label="Prettify">
-          <PrettifyIcon className="graphiql-toolbar-icon" />
+          label="Prettify Query (Shift-Ctrl-P)">
+          <PrettifyIcon className="graphiql-toolbar-icon" aria-hidden="true" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => {
             this.props.merge();
           }}
-          title="Merge Query (Shift-Ctrl-M)"
-          aria-label="Merge">
-          <MergeIcon className="graphiql-toolbar-icon" />
+          label="Merge Query (Shift-Ctrl-M)">
+          <MergeIcon className="graphiql-toolbar-icon" aria-hidden="true" />
         </ToolbarButton>
         <ToolbarButton
           onClick={() => {
             this.props.copy();
           }}
-          title="Copy Query (Shift-Ctrl-C)"
-          aria-label="Copy">
-          <CopyIcon className="graphiql-toolbar-icon" />
+          label="Copy Query (Shift-Ctrl-C)">
+          <CopyIcon className="graphiql-toolbar-icon" aria-hidden="true" />
         </ToolbarButton>
         {this.props.toolbar?.additionalContent
           ? this.props.toolbar.additionalContent
@@ -694,76 +692,104 @@ class GraphiQLWithContext extends React.Component<
         <div className="graphiql-sidebar">
           <div>
             {this.props.explorerContext ? (
-              <UnStyledButton
-                className={this.props.explorerContext.isVisible ? 'active' : ''}
-                onClick={() => {
-                  if (this.props.explorerContext?.isVisible) {
-                    this.props.explorerContext?.hide();
-                    this.props.pluginResize.setHiddenElement('first');
-                  } else {
-                    this.props.explorerContext?.show();
-                    this.props.pluginResize.setHiddenElement(null);
-                    if (this.props.historyContext?.isVisible) {
-                      this.props.historyContext.hide();
-                    }
-                  }
-                }}
-                title={
+              <Tooltip
+                label={
                   this.props.explorerContext.isVisible
                     ? 'Hide Documentation Explorer'
                     : 'Show Documentation Explorer'
                 }>
-                <DocsIcon />
-              </UnStyledButton>
-            ) : null}
-            {this.props.historyContext ? (
-              <UnStyledButton
-                className={this.props.historyContext.isVisible ? 'active' : ''}
-                onClick={() => {
-                  if (!this.props.historyContext) {
-                    return;
+                <UnStyledButton
+                  className={
+                    this.props.explorerContext.isVisible ? 'active' : ''
                   }
-                  this.props.historyContext.toggle();
-                  if (this.props.historyContext.isVisible) {
-                    this.props.pluginResize.setHiddenElement('first');
-                  } else {
-                    this.props.pluginResize.setHiddenElement(null);
+                  onClick={() => {
                     if (this.props.explorerContext?.isVisible) {
-                      this.props.explorerContext.hide();
+                      this.props.explorerContext?.hide();
+                      this.props.pluginResize.setHiddenElement('first');
+                    } else {
+                      this.props.explorerContext?.show();
+                      this.props.pluginResize.setHiddenElement(null);
+                      if (this.props.historyContext?.isVisible) {
+                        this.props.historyContext.hide();
+                      }
                     }
-                  }
-                }}
-                title={
+                  }}
+                  aria-label={
+                    this.props.explorerContext.isVisible
+                      ? 'Hide Documentation Explorer'
+                      : 'Show Documentation Explorer'
+                  }>
+                  <DocsIcon aria-hidden="true" />
+                </UnStyledButton>
+              </Tooltip>
+            ) : null}
+            {this.props.historyContext ? (
+              <Tooltip
+                label={
                   this.props.historyContext.isVisible
                     ? 'Hide History'
                     : 'Show History'
                 }>
-                <HistoryIcon />
-              </UnStyledButton>
+                <UnStyledButton
+                  className={
+                    this.props.historyContext.isVisible ? 'active' : ''
+                  }
+                  onClick={() => {
+                    if (!this.props.historyContext) {
+                      return;
+                    }
+                    this.props.historyContext.toggle();
+                    if (this.props.historyContext.isVisible) {
+                      this.props.pluginResize.setHiddenElement('first');
+                    } else {
+                      this.props.pluginResize.setHiddenElement(null);
+                      if (this.props.explorerContext?.isVisible) {
+                        this.props.explorerContext.hide();
+                      }
+                    }
+                  }}
+                  aria-label={
+                    this.props.historyContext.isVisible
+                      ? 'Hide History'
+                      : 'Show History'
+                  }>
+                  <HistoryIcon aria-hidden="true" />
+                </UnStyledButton>
+              </Tooltip>
             ) : null}
           </div>
           <div>
-            <UnStyledButton
-              disabled={this.props.schemaContext.isFetching}
-              onClick={() => this.props.schemaContext.introspect()}>
-              <ReloadIcon
-                className={
-                  this.props.schemaContext.isFetching ? 'graphiql-spin' : ''
-                }
-              />
-            </UnStyledButton>
-            <UnStyledButton
-              onClick={() => {
-                this.setState({ showShortKeys: true });
-              }}>
-              <KeyboardShortcutIcon />
-            </UnStyledButton>
-            <UnStyledButton
-              onClick={() => {
-                this.setState({ showSettings: true });
-              }}>
-              <SettingsIcon />
-            </UnStyledButton>
+            <Tooltip label="Re-fetch GraphQL schema">
+              <UnStyledButton
+                disabled={this.props.schemaContext.isFetching}
+                onClick={() => this.props.schemaContext.introspect()}
+                aria-label="Re-fetch GraphQL schema">
+                <ReloadIcon
+                  className={
+                    this.props.schemaContext.isFetching ? 'graphiql-spin' : ''
+                  }
+                  aria-hidden="true"
+                />
+              </UnStyledButton>
+            </Tooltip>
+            <Tooltip label="Open short keys dialog">
+              <UnStyledButton
+                onClick={() => {
+                  this.setState({ showShortKeys: true });
+                }}
+                aria-label="Open short keys dialog">
+                <KeyboardShortcutIcon aria-hidden="true" />
+              </UnStyledButton>
+            </Tooltip>
+            <Tooltip label="Open settings dialog">
+              <UnStyledButton
+                onClick={() => {
+                  this.setState({ showSettings: true });
+                }}
+                aria-label="Open settings dialog">
+                <SettingsIcon aria-hidden="true" />
+              </UnStyledButton>
+            </Tooltip>
           </div>
         </div>
         <div className="graphiql-main">
@@ -796,8 +822,7 @@ class GraphiQLWithContext extends React.Component<
                           key={tab.id}
                           isActive={
                             index === this.props.editorContext.activeTabIndex
-                          }
-                          title={tab.title}>
+                          }>
                           <Tab.Button
                             aria-controls="graphiql-session"
                             id={`graphiql-session-tab-${index}`}
@@ -820,25 +845,31 @@ class GraphiQLWithContext extends React.Component<
                           />
                         </Tab>
                       ))}
-                      <UnStyledButton
-                        className="graphiql-tab-add"
-                        onClick={() => {
-                          this.props.editorContext.addTab();
-                        }}>
-                        <PlusIcon />
-                      </UnStyledButton>
+                      <Tooltip label="Add tab">
+                        <UnStyledButton
+                          className="graphiql-tab-add"
+                          onClick={() => {
+                            this.props.editorContext.addTab();
+                          }}
+                          aria-label="Add tab">
+                          <PlusIcon aria-hidden="true" />
+                        </UnStyledButton>
+                      </Tooltip>
                     </>
                   ) : null}
                 </Tabs>
                 <div className="graphiql-session-header-right">
                   {this.props.editorContext.tabs.length === 1 ? (
-                    <UnStyledButton
-                      className="graphiql-tab-add"
-                      onClick={() => {
-                        this.props.editorContext.addTab();
-                      }}>
-                      <PlusIcon />
-                    </UnStyledButton>
+                    <Tooltip label="Add tab">
+                      <UnStyledButton
+                        className="graphiql-tab-add"
+                        onClick={() => {
+                          this.props.editorContext.addTab();
+                        }}
+                        aria-label="Add tab">
+                        <PlusIcon aria-hidden="true" />
+                      </UnStyledButton>
+                    </Tooltip>
                   ) : null}
                   <div className="graphiql-logo">{logo}</div>
                 </div>
@@ -929,22 +960,42 @@ class GraphiQLWithContext extends React.Component<
                             </UnStyledButton>
                           ) : null}
                         </div>
-                        <UnStyledButton
-                          onClick={() => {
-                            this.props.editorToolsResize.setHiddenElement(
+                        <Tooltip
+                          label={
+                            this.props.editorToolsResize.hiddenElement ===
+                            'second'
+                              ? 'Show editor tools'
+                              : 'Hide editor tools'
+                          }>
+                          <UnStyledButton
+                            onClick={() => {
+                              this.props.editorToolsResize.setHiddenElement(
+                                this.props.editorToolsResize.hiddenElement ===
+                                  'second'
+                                  ? null
+                                  : 'second',
+                              );
+                            }}
+                            aria-label={
                               this.props.editorToolsResize.hiddenElement ===
-                                'second'
-                                ? null
-                                : 'second',
-                            );
-                          }}>
-                          {this.props.editorToolsResize.hiddenElement ===
-                          'second' ? (
-                            <ChevronUpIcon className="graphiql-chevron-icon" />
-                          ) : (
-                            <ChevronDownIcon className="graphiql-chevron-icon" />
-                          )}
-                        </UnStyledButton>
+                              'second'
+                                ? 'Show editor tools'
+                                : 'Hide editor tools'
+                            }>
+                            {this.props.editorToolsResize.hiddenElement ===
+                            'second' ? (
+                              <ChevronUpIcon
+                                className="graphiql-chevron-icon"
+                                aria-hidden="true"
+                              />
+                            ) : (
+                              <ChevronDownIcon
+                                className="graphiql-chevron-icon"
+                                aria-hidden="true"
+                              />
+                            )}
+                          </UnStyledButton>
+                        </Tooltip>
                       </div>
                     </div>
                     <div ref={this.props.editorToolsResize.secondRef}>
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index 0175b46db78..eba89ad7bc6 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -173,7 +173,7 @@ describe('GraphiQL', () => {
   });
 
   it('will save history item even when history panel is closed', () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         query={mockQuery1}
         variables={mockVariables1}
@@ -182,15 +182,15 @@ describe('GraphiQL', () => {
         fetcher={noOpFetcher}
       />,
     );
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
-    fireEvent.click(getByTitle('Show History'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Show History'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(1);
   });
 
   it('adds a history item when the execute query function button is clicked', () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         query={mockQuery1}
         variables={mockVariables1}
@@ -199,26 +199,26 @@ describe('GraphiQL', () => {
         fetcher={noOpFetcher}
       />,
     );
-    fireEvent.click(getByTitle('Show History'));
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Show History'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(1);
   });
 
   it('will not save invalid queries', () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL query={mockBadQuery} fetcher={noOpFetcher} />,
     );
-    fireEvent.click(getByTitle('Show History'));
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Show History'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(0);
   });
 
   it('will save if there was not a previously saved query', () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
         operationName={mockOperationName1}
@@ -227,15 +227,15 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
-    fireEvent.click(getByTitle('Show History'));
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Show History'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(1);
   });
 
   it('will not save a query if the query is the same as previous query', () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
         operationName={mockOperationName1}
@@ -244,19 +244,19 @@ describe('GraphiQL', () => {
         headers={mockHeaders1}
       />,
     );
-    fireEvent.click(getByTitle('Show History'));
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Show History'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(1);
-    fireEvent.click(getByTitle('Execute Query (Ctrl-Enter)'));
+    fireEvent.click(getByLabelText('Execute Query (Ctrl-Enter)'));
     expect(
       container.querySelectorAll('.graphiql-history-items li'),
     ).toHaveLength(1);
   });
 
   it('will save if new query is different than previous query', async () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
         operationName={mockOperationName1}
@@ -266,8 +266,8 @@ describe('GraphiQL', () => {
       />,
     );
     await wait();
-    fireEvent.click(getByTitle('Show History'));
-    const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
+    fireEvent.click(getByLabelText('Show History'));
+    const executeQueryButton = getByLabelText('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.graphiql-history-item')).toHaveLength(
       1,
@@ -290,7 +290,7 @@ describe('GraphiQL', () => {
   });
 
   it('will save query if variables are different', async () => {
-    const { getByTitle, container } = render(
+    const { getByLabelText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
         operationName={mockOperationName1}
@@ -300,8 +300,8 @@ describe('GraphiQL', () => {
       />,
     );
     await wait();
-    fireEvent.click(getByTitle('Show History'));
-    const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
+    fireEvent.click(getByLabelText('Show History'));
+    const executeQueryButton = getByLabelText('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.graphiql-history-item')).toHaveLength(
       1,
@@ -322,7 +322,7 @@ describe('GraphiQL', () => {
   });
 
   it('will save query if headers are different', async () => {
-    const { getByTitle, getByText, container } = render(
+    const { getByLabelText, getByText, container } = render(
       <GraphiQL
         fetcher={noOpFetcher}
         operationName={mockOperationName1}
@@ -334,8 +334,8 @@ describe('GraphiQL', () => {
     );
     await wait();
 
-    fireEvent.click(getByTitle('Show History'));
-    const executeQueryButton = getByTitle('Execute Query (Ctrl-Enter)');
+    fireEvent.click(getByLabelText('Show History'));
+    const executeQueryButton = getByLabelText('Execute Query (Ctrl-Enter)');
     fireEvent.click(executeQueryButton);
     expect(container.querySelectorAll('.graphiql-history-item')).toHaveLength(
       1,
@@ -571,7 +571,7 @@ describe('GraphiQL', () => {
     const { container } = render(<GraphiQL fetcher={noOpFetcher} />);
 
     fireEvent.click(
-      container.querySelector('[title="Show Documentation Explorer"]'),
+      container.querySelector('[aria-label="Show Documentation Explorer"]'),
     );
     const dragBar = container.querySelectorAll(
       '.graphiql-horizontal-drag-bar',
diff --git a/packages/graphiql/src/style.css b/packages/graphiql/src/style.css
index e20251f221e..6b1e006aabd 100644
--- a/packages/graphiql/src/style.css
+++ b/packages/graphiql/src/style.css
@@ -30,7 +30,6 @@
 .graphiql-container .graphiql-sidebar button > svg {
   height: calc(var(--sidebar-width) - (2 * var(--px-12)));
   padding: var(--px-12);
-  pointer-events: none;
   width: calc(var(--sidebar-width) - (2 * var(--px-12)));
 }
 
@@ -285,3 +284,8 @@ reach-portal .graphiql-key {
   border-radius: var(--border-radius-4);
   padding: var(--px-4);
 }
+
+/* Avoid showing native tooltips for icons with titles */
+.graphiql-container svg {
+  pointer-events: none;
+}
diff --git a/yarn.lock b/yarn.lock
index 1722c407479..ef66b06e283 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4549,6 +4549,20 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
+"@reach/tooltip@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.17.0.tgz#044b43de248a05b18641b4220310983cb54675a2"
+  integrity sha512-HP8Blordzqb/Cxg+jnhGmWQfKgypamcYLBPlcx6jconyV5iLJ5m93qipr1giK7MqKT2wlsKWy44ZcOrJ+Wrf8w==
+  dependencies:
+    "@reach/auto-id" "0.17.0"
+    "@reach/portal" "0.17.0"
+    "@reach/rect" "0.17.0"
+    "@reach/utils" "0.17.0"
+    "@reach/visually-hidden" "0.17.0"
+    prop-types "^15.7.2"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
+
 "@reach/utils@0.17.0":
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.17.0.tgz#3d1d2ec56d857f04fe092710d8faee2b2b121303"
@@ -4557,7 +4571,7 @@
     tiny-warning "^1.0.3"
     tslib "^2.3.0"
 
-"@reach/visually-hidden@^0.17.0":
+"@reach/visually-hidden@0.17.0", "@reach/visually-hidden@^0.17.0":
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.17.0.tgz#033adba10b5ec419649da8d6bd8e46db06d4c3a1"
   integrity sha512-T6xF3Nv8vVnjVkGU6cm0+kWtvliLqPAo8PcZ+WxkKacZsaHTjaZb4v1PaCcyQHmuTNT/vtTVNOJLG0SjQOIb7g==