diff --git a/src-docs/src/views/datagrid/additional_controls.js b/src-docs/src/views/datagrid/additional_controls.js
deleted file mode 100644
index dfa50437dd4..00000000000
--- a/src-docs/src/views/datagrid/additional_controls.js
+++ /dev/null
@@ -1,127 +0,0 @@
-import React, { useState, useCallback, Fragment } from 'react';
-import { fake } from 'faker';
-
-import {
-  EuiDataGrid,
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiLink,
-} from '../../../../src/components/';
-
-const columns = [
-  {
-    id: 'name',
-  },
-  {
-    id: 'email',
-  },
-  {
-    id: 'city',
-  },
-  {
-    id: 'country',
-  },
-  {
-    id: 'account',
-  },
-];
-
-const data = [];
-
-for (let i = 1; i < 20; i++) {
-  data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: (
-      <EuiLink href="http://google.com">{fake('{{address.city}}')}</EuiLink>
-    ),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
-  });
-}
-
-export default () => {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
-
-  const [visibleColumns, setVisibleColumns] = useState(() =>
-    columns.map(({ id }) => id)
-  );
-
-  const setPageIndex = useCallback(
-    (pageIndex) => setPagination({ ...pagination, pageIndex }),
-    [pagination, setPagination]
-  );
-  const setPageSize = useCallback(
-    (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
-    [pagination, setPagination]
-  );
-
-  return (
-    <EuiDataGrid
-      aria-label="Data grid demo with additional controls"
-      columns={columns}
-      columnVisibility={{
-        visibleColumns: visibleColumns,
-        setVisibleColumns: setVisibleColumns,
-      }}
-      rowCount={data.length}
-      gridStyle={{
-        border: 'horizontal',
-        header: 'underline',
-      }}
-      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
-      pagination={{
-        ...pagination,
-        pageSizeOptions: [5, 10, 25],
-        onChangeItemsPerPage: setPageSize,
-        onChangePage: setPageIndex,
-      }}
-      toolbarVisibility={{
-        additionalControls: {
-          left: (
-            <Fragment>
-              <EuiButtonEmpty
-                size="xs"
-                iconType="bell"
-                color="primary"
-                className="euiDataGrid__controlBtn"
-                onClick={() => {}}
-              >
-                New button
-              </EuiButtonEmpty>
-              <EuiButtonEmpty
-                size="xs"
-                iconType="branch"
-                color="danger"
-                className="euiDataGrid__controlBtn"
-                onClick={() => {}}
-              >
-                Another button
-              </EuiButtonEmpty>
-            </Fragment>
-          ),
-          right: (
-            <Fragment>
-              <EuiButtonIcon
-                aria-label="Right-side button"
-                size="xs"
-                iconType="refresh"
-                color="success"
-                className="euiDataGrid__controlBtn"
-                onClick={() => {}}
-              />
-              <EuiButtonIcon
-                aria-label="Another right-side button"
-                size="xs"
-                iconType="grid"
-                color="accent"
-                className="euiDataGrid__controlBtn"
-                onClick={() => {}}
-              />
-            </Fragment>
-          ),
-        },
-      }}
-    />
-  );
-};
diff --git a/src-docs/src/views/datagrid/additional_controls.tsx b/src-docs/src/views/datagrid/additional_controls.tsx
new file mode 100644
index 00000000000..1e98546c3bf
--- /dev/null
+++ b/src-docs/src/views/datagrid/additional_controls.tsx
@@ -0,0 +1,197 @@
+import React, { useState, useCallback, Fragment } from 'react';
+
+// @ts-ignore Importing from JS
+import { fake } from 'faker';
+
+import {
+  EuiDataGrid,
+  EuiButtonEmpty,
+  EuiButtonIcon,
+  EuiLink,
+  EuiToolTip,
+  useGeneratedHtmlId,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiText,
+  EuiTitle,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
+  EuiPopover,
+} from '../../../../src';
+
+const columns = [
+  {
+    id: 'name',
+  },
+  {
+    id: 'email',
+  },
+  {
+    id: 'city',
+  },
+  {
+    id: 'country',
+  },
+  {
+    id: 'account',
+  },
+];
+
+const data: any[] = [];
+
+for (let i = 1; i < 20; i++) {
+  data.push({
+    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+    email: fake('{{internet.email}}'),
+    city: (
+      <EuiLink href="http://google.com">{fake('{{address.city}}')}</EuiLink>
+    ),
+    country: fake('{{address.country}}'),
+    account: fake('{{finance.account}}'),
+  });
+}
+
+export default () => {
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
+  const flyoutTitleId = useGeneratedHtmlId({
+    prefix: 'dataGridAdditionalControlsFlyout',
+  });
+
+  let flyout;
+  if (isFlyoutVisible) {
+    flyout = (
+      <EuiFlyout
+        onClose={() => setIsFlyoutVisible(false)}
+        aria-labelledby={flyoutTitleId}
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="m">
+            <h2 id={flyoutTitleId}>Inspect</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <EuiText>
+            <p>
+              This is not a real control, just an example of how to trigger a
+              flyout from a custom data grid control.
+            </p>
+          </EuiText>
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    );
+  }
+
+  const [isPopoverOpen, setPopover] = useState(false);
+  const popoverId = useGeneratedHtmlId({
+    prefix: 'dataGridAdditionalControlsPopover',
+  });
+  const alertAndClosePopover = () => {
+    setPopover(false);
+    window.alert('This is not a real control.');
+  };
+
+  const [visibleColumns, setVisibleColumns] = useState(() =>
+    columns.map(({ id }) => id)
+  );
+
+  const setPageIndex = useCallback(
+    (pageIndex) => setPagination({ ...pagination, pageIndex }),
+    [pagination, setPagination]
+  );
+  const setPageSize = useCallback(
+    (pageSize) => setPagination({ ...pagination, pageSize, pageIndex: 0 }),
+    [pagination, setPagination]
+  );
+
+  return (
+    <>
+      <EuiDataGrid
+        aria-label="Data grid demo with additional controls"
+        columns={columns}
+        columnVisibility={{
+          visibleColumns: visibleColumns,
+          setVisibleColumns: setVisibleColumns,
+        }}
+        rowCount={data.length}
+        gridStyle={{
+          border: 'horizontal',
+          header: 'underline',
+        }}
+        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        pagination={{
+          ...pagination,
+          pageSizeOptions: [5, 10, 25],
+          onChangeItemsPerPage: setPageSize,
+          onChangePage: setPageIndex,
+        }}
+        toolbarVisibility={{
+          additionalControls: {
+            left: (
+              <EuiPopover
+                id={popoverId}
+                button={
+                  <EuiButtonEmpty
+                    size="xs"
+                    iconType="download"
+                    onClick={() => setPopover((open) => !open)}
+                  >
+                    Download
+                  </EuiButtonEmpty>
+                }
+                isOpen={isPopoverOpen}
+                closePopover={() => setPopover(false)}
+                panelPaddingSize="none"
+              >
+                <EuiContextMenuPanel
+                  size="s"
+                  items={[
+                    <EuiContextMenuItem
+                      key="csv"
+                      onClick={alertAndClosePopover}
+                    >
+                      CSV
+                    </EuiContextMenuItem>,
+                    <EuiContextMenuItem
+                      key="jsonedit"
+                      onClick={alertAndClosePopover}
+                    >
+                      JSON
+                    </EuiContextMenuItem>,
+                  ]}
+                />
+              </EuiPopover>
+            ),
+            right: (
+              <Fragment>
+                <EuiToolTip
+                  title="Updated 3 min ago"
+                  content="Click to refresh"
+                >
+                  <EuiButtonIcon
+                    aria-label="Refresh grid data"
+                    size="xs"
+                    iconType="refresh"
+                    onClick={() => {
+                      window.alert('This is not a real control.');
+                    }}
+                  />
+                </EuiToolTip>
+                <EuiToolTip content="Inspect grid data">
+                  <EuiButtonIcon
+                    aria-label="Inspect grid data"
+                    size="xs"
+                    iconType="inspect"
+                    onClick={() => setIsFlyoutVisible(true)}
+                  />
+                </EuiToolTip>
+              </Fragment>
+            ),
+          },
+        }}
+      />
+      {flyout}
+    </>
+  );
+};
diff --git a/src-docs/src/views/datagrid/control_columns.js b/src-docs/src/views/datagrid/control_columns.js
index bee036d8aca..434fb8e754b 100644
--- a/src-docs/src/views/datagrid/control_columns.js
+++ b/src-docs/src/views/datagrid/control_columns.js
@@ -27,6 +27,8 @@ import {
   EuiDescriptionList,
   EuiDescriptionListTitle,
   EuiDescriptionListDescription,
+  EuiContextMenuItem,
+  EuiContextMenuPanel,
 } from '../../../../src/components/';
 
 const columns = [
@@ -77,6 +79,11 @@ const SelectionContext = createContext();
 const SelectionButton = () => {
   const [selectedRows] = useContext(SelectionContext);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const alertAndClosePopover = () => {
+    setIsPopoverOpen(false);
+    window.alert('This is not a real control.');
+  };
+
   if (selectedRows.size > 0) {
     return (
       <EuiPopover
@@ -87,8 +94,7 @@ const SelectionButton = () => {
           <EuiButtonEmpty
             size="xs"
             iconType="arrowDown"
-            color="primary"
-            className="euiDataGrid__controlBtn"
+            iconSide="right"
             onClick={() => setIsPopoverOpen(!isPopoverOpen)}
           >
             {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}{' '}
@@ -100,43 +106,25 @@ const SelectionButton = () => {
         <EuiPopoverTitle>
           {selectedRows.size} {selectedRows.size > 1 ? 'items' : 'item'}
         </EuiPopoverTitle>
-        <div style={{ width: 150 }}>
-          <button onClick={() => {}} component="span">
-            <EuiFlexGroup
-              responsive={false}
-              alignItems="center"
-              component="span"
-              gutterSize="s"
+        <EuiContextMenuPanel
+          size="s"
+          items={[
+            <EuiContextMenuItem
+              key="pin"
+              icon="pin"
+              onClick={alertAndClosePopover}
             >
-              <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  aria-label="Pin selected items"
-                  iconType="pin"
-                  color="text"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>Pin items</EuiFlexItem>
-            </EuiFlexGroup>
-          </button>
-          <EuiSpacer size="s" />
-          <button onClick={() => {}}>
-            <EuiFlexGroup
-              responsive={false}
-              alignItems="center"
-              component="span"
-              gutterSize="s"
+              Pin items
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="delete"
+              icon="trash"
+              onClick={alertAndClosePopover}
             >
-              <EuiFlexItem grow={false}>
-                <EuiButtonIcon
-                  aria-label="Delete selected items"
-                  iconType="trash"
-                  color="text"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>Delete items</EuiFlexItem>
-            </EuiFlexGroup>
-          </button>
-        </div>
+              Delete item
+            </EuiContextMenuItem>,
+          ]}
+        />
       </EuiPopover>
     );
   } else {
diff --git a/src-docs/src/views/datagrid/datagrid_styling_example.js b/src-docs/src/views/datagrid/datagrid_styling_example.js
index 98a8d4802aa..332c4b1bc23 100644
--- a/src-docs/src/views/datagrid/datagrid_styling_example.js
+++ b/src-docs/src/views/datagrid/datagrid_styling_example.js
@@ -65,17 +65,11 @@ const gridSnippet = `<EuiDataGrid
         <Fragment>
           <EuiButtonEmpty
             size="xs"
-            iconType="bell"
-            color="text"
-            className="euiDataGrid__controlBtn"
             onClick={() => {}}>
             New button
           </EuiButtonEmpty>
           <EuiButtonEmpty
             size="xs"
-            iconType="branch"
-            color="text"
-            className="euiDataGrid__controlBtn"
             onClick={() => {}}>
             Another button
           </EuiButtonEmpty>
@@ -108,17 +102,11 @@ const controlsSnippet = `<EuiDataGrid
         <Fragment>
           <EuiButtonEmpty
             size="xs"
-            iconType="bell"
-            color="text"
-            className="euiDataGrid__controlBtn"
             onClick={() => {}}>
             New button
           </EuiButtonEmpty>
           <EuiButtonEmpty
             size="xs"
-            iconType="branch"
-            color="text"
-            className="euiDataGrid__controlBtn"
             onClick={() => {}}>
             Another button
           </EuiButtonEmpty>
@@ -126,22 +114,22 @@ const controlsSnippet = `<EuiDataGrid
       ),
       right: (
         <Fragment>
-          <EuiButtonIcon
-            aria-label="Right-side button"
-            size="xs"
-            iconType="refresh"
-            color="success"
-            className="euiDataGrid__controlBtn"
-            onClick={() => {}}
-          />
-          <EuiButtonIcon
-            aria-label="Another right-side button"
-            size="xs"
-            iconType="grid"
-            color="accent"
-            className="euiDataGrid__controlBtn"
-            onClick={() => {}}
-          />
+          <EuiToolTip content="Right-side button">
+            <EuiButtonIcon
+              aria-label="Right-side button"
+              size="xs"
+              iconType="refresh"
+              onClick={() => {}}
+            />
+          </EuiToolTip>
+          <EuiToolTip content="Another right-side button">
+            <EuiButtonIcon
+              aria-label="Another right-side button"
+              size="xs"
+              iconType="inspect"
+              onClick={() => {}}
+            />
+          </EuiToolTip>
         </Fragment>
       )
     }
@@ -273,7 +261,7 @@ export const DataGridStylingExample = {
         <>
           <p>
             Use the <EuiCode>toolbarVisibility.additionalControls</EuiCode> prop
-            to pass additional controls to the toolbar. It will respect the{' '}
+            to pass more buttons to the toolbar. It will respect the{' '}
             <EuiCode language="js">toolbarVisibility={'{false}'}</EuiCode>{' '}
             setting and hide when appropriate.
           </p>
@@ -298,9 +286,10 @@ export const DataGridStylingExample = {
           </ul>
           <p>
             Although any node is allowed, the recommendation is to use{' '}
-            <strong>EuiButtonEmpty</strong> for the left-side of the toolbar and{' '}
-            <strong>EuiButtonIcon</strong> for the right-side of the toolbar,
-            with the configurations shown in the snippet.
+            <EuiCode>{'<EuiButtonEmpty size="xs" />'}</EuiCode> for the
+            left-side of the toolbar and{' '}
+            <EuiCode>{'<EuiButtonIcon size="xs" />'}</EuiCode> for the
+            right-side of the toolbar.
           </p>
         </>
       ),
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index bd507bb4161..4bd0193a57b 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -986,34 +986,42 @@ Array [
             <div
               class="euiPopover__anchor"
             >
-              <button
-                aria-label="Grid display"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-                data-test-subj="dataGridStyleSelectorButton"
-                type="button"
+              <span
+                class="euiToolTipAnchor"
               >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="tableDensityNormal"
-                />
-              </button>
+                <button
+                  aria-label="Display options"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+                  data-test-subj="dataGridStyleSelectorButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="tableDensityNormal"
+                  />
+                </button>
+              </span>
             </div>
           </div>
-          <button
-            aria-label="Full screen"
-            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-            data-test-subj="dataGridFullScreenButton"
-            type="button"
+          <span
+            class="euiToolTipAnchor"
           >
-            <span
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              color="inherit"
-              data-euiicon-type="fullScreen"
-            />
-          </button>
+            <button
+              aria-label="Full screen"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridFullScreenButton"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="fullScreen"
+              />
+            </button>
+          </span>
         </div>
       </div>
       <div
@@ -1376,34 +1384,42 @@ Array [
             <div
               class="euiPopover__anchor"
             >
-              <button
-                aria-label="Grid display"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-                data-test-subj="dataGridStyleSelectorButton"
-                type="button"
+              <span
+                class="euiToolTipAnchor"
               >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="tableDensityNormal"
-                />
-              </button>
+                <button
+                  aria-label="Display options"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+                  data-test-subj="dataGridStyleSelectorButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="tableDensityNormal"
+                  />
+                </button>
+              </span>
             </div>
           </div>
-          <button
-            aria-label="Full screen"
-            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-            data-test-subj="dataGridFullScreenButton"
-            type="button"
+          <span
+            class="euiToolTipAnchor"
           >
-            <span
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              color="inherit"
-              data-euiicon-type="fullScreen"
-            />
-          </button>
+            <button
+              aria-label="Full screen"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridFullScreenButton"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="fullScreen"
+              />
+            </button>
+          </span>
         </div>
       </div>
       <div
@@ -2069,34 +2085,42 @@ Array [
             <div
               class="euiPopover__anchor"
             >
-              <button
-                aria-label="Grid display"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-                data-test-subj="dataGridStyleSelectorButton"
-                type="button"
+              <span
+                class="euiToolTipAnchor"
               >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="tableDensityNormal"
-                />
-              </button>
+                <button
+                  aria-label="Display options"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+                  data-test-subj="dataGridStyleSelectorButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="tableDensityNormal"
+                  />
+                </button>
+              </span>
             </div>
           </div>
-          <button
-            aria-label="Full screen"
-            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-            data-test-subj="dataGridFullScreenButton"
-            type="button"
+          <span
+            class="euiToolTipAnchor"
           >
-            <span
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              color="inherit"
-              data-euiicon-type="fullScreen"
-            />
-          </button>
+            <button
+              aria-label="Full screen"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridFullScreenButton"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="fullScreen"
+              />
+            </button>
+          </span>
         </div>
       </div>
       <div
@@ -2458,34 +2482,42 @@ Array [
             <div
               class="euiPopover__anchor"
             >
-              <button
-                aria-label="Grid display"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-                data-test-subj="dataGridStyleSelectorButton"
-                type="button"
+              <span
+                class="euiToolTipAnchor"
               >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="tableDensityNormal"
-                />
-              </button>
+                <button
+                  aria-label="Display options"
+                  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+                  data-test-subj="dataGridStyleSelectorButton"
+                  type="button"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiButtonIcon__icon"
+                    color="inherit"
+                    data-euiicon-type="tableDensityNormal"
+                  />
+                </button>
+              </span>
             </div>
           </div>
-          <button
-            aria-label="Full screen"
-            class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
-            data-test-subj="dataGridFullScreenButton"
-            type="button"
+          <span
+            class="euiToolTipAnchor"
           >
-            <span
-              aria-hidden="true"
-              class="euiButtonIcon__icon"
-              color="inherit"
-              data-euiicon-type="fullScreen"
-            />
-          </button>
+            <button
+              aria-label="Full screen"
+              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
+              data-test-subj="dataGridFullScreenButton"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="fullScreen"
+              />
+            </button>
+          </span>
         </div>
       </div>
       <div
diff --git a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap
index 7c096fc42b2..c850e0e74b8 100644
--- a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap
+++ b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap
@@ -5,15 +5,22 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover
   <EuiPopover
     anchorPosition="downRight"
     button={
-      <EuiButtonIcon
-        aria-label="Grid display"
-        className="euiDataGrid__controlBtn"
-        color="text"
-        data-test-subj="dataGridStyleSelectorButton"
-        iconType="tableDensityNormal"
-        onClick={[Function]}
-        size="xs"
-      />
+      <EuiToolTip
+        content="Display options"
+        delay="long"
+        display="inlineBlock"
+        position="top"
+      >
+        <EuiButtonIcon
+          aria-label="Display options"
+          className="euiDataGrid__controlBtn"
+          color="text"
+          data-test-subj="dataGridStyleSelectorButton"
+          iconType="tableDensityNormal"
+          onClick={[Function]}
+          size="xs"
+        />
+      </EuiToolTip>
     }
     closePopover={[Function]}
     data-test-subj="dataGridStyleSelectorPopover"
@@ -21,7 +28,7 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover
     hasArrow={true}
     isOpen={false}
     ownFocus={true}
-    panelClassName="euiDataGrid__controlPopover"
+    panelClassName="euiDataGrid__displayPopoverPanel"
     panelPaddingSize="s"
   >
     <EuiI18n
diff --git a/src/components/datagrid/controls/_data_grid_display.scss b/src/components/datagrid/controls/_data_grid_display.scss
index d673bf455aa..628f4c2e010 100644
--- a/src/components/datagrid/controls/_data_grid_display.scss
+++ b/src/components/datagrid/controls/_data_grid_display.scss
@@ -1,3 +1,3 @@
-.euiDataGrid__displayFormRow {
-  width: $euiFormMaxWidth;
+.euiDataGrid__displayPopoverPanel {
+  width: $euiFormMaxWidth + $euiSize;
 }
diff --git a/src/components/datagrid/controls/_data_grid_toolbar.scss b/src/components/datagrid/controls/_data_grid_toolbar.scss
index e9f77596327..4a7913dd4eb 100644
--- a/src/components/datagrid/controls/_data_grid_toolbar.scss
+++ b/src/components/datagrid/controls/_data_grid_toolbar.scss
@@ -3,15 +3,18 @@
   position: relative;
   z-index: 3; // Needs to sit above the content blow that sits below it
   border: $euiBorderThin;
-  padding: $euiSizeXS;
+  padding: $euiSizeXS $euiSizeXS $euiSizeXS 0;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }
 
 .euiDataGrid__rightControls {
+  // These **should** just be icon buttons and so we'll restrict them to not wrap lines
+  white-space: nowrap;
+
   // Keep this right-aligned if hasRoomForGridControls is hiding dataControls
   &:only-child {
-    margin-right: 0;
     margin-left: auto;
   }
 
@@ -28,18 +31,9 @@
   }
 }
 
-.euiDataGrid__controlBtn {
-  border-radius: $euiBorderRadius;
-
-  &:focus {
-    background: shadeOrTint($euiColorLightestShade, 10%, 10%);
-  }
-}
-
 .euiDataGrid__controlBtn--active,
 .euiDataGrid__controlBtn--active:focus {
   font-weight: $euiFontWeightSemiBold;
-  color: $euiColorFullShade;
 }
 
 @include euiDataGridStyles(bordersNone) {
diff --git a/src/components/datagrid/controls/data_grid_toolbar.test.tsx b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
index d4daff865d2..ee99cd71d7d 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.test.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.test.tsx
@@ -52,15 +52,22 @@ describe('EuiDataGridToolbar', () => {
           <div>
             mock style selector
           </div>
-          <EuiButtonIcon
-            aria-label="Full screen"
-            className=""
-            color="text"
-            data-test-subj="dataGridFullScreenButton"
-            iconType="fullScreen"
-            onClick={[Function]}
-            size="xs"
-          />
+          <EuiToolTip
+            content="Full screen"
+            delay="long"
+            display="inlineBlock"
+            position="top"
+          >
+            <EuiButtonIcon
+              aria-label="Full screen"
+              className=""
+              color="text"
+              data-test-subj="dataGridFullScreenButton"
+              iconType="fullScreen"
+              onClick={[Function]}
+              size="xs"
+            />
+          </EuiToolTip>
         </div>
       </div>
     `);
diff --git a/src/components/datagrid/controls/data_grid_toolbar.tsx b/src/components/datagrid/controls/data_grid_toolbar.tsx
index 058277a78d2..15b7ce80237 100644
--- a/src/components/datagrid/controls/data_grid_toolbar.tsx
+++ b/src/components/datagrid/controls/data_grid_toolbar.tsx
@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect } from 'react';
+import { EuiToolTip } from '../../tool_tip';
 import { EuiButtonIcon } from '../../button';
 import { useEuiI18n } from '../../i18n';
 import {
@@ -48,22 +49,42 @@ export const EuiDataGridToolbar = ({
     ? true
     : gridWidth > minSizeForControls || isFullScreen;
 
-  // need to safely access those Web APIs
-  if (typeof document !== 'undefined') {
-    // When data grid is full screen, we add a class to the body to remove the extra scrollbar
-    document.body.classList.toggle(GRID_IS_FULLSCREEN_CLASSNAME, isFullScreen);
-  }
+  useEffect(() => {
+    // When data grid is full screen, we add a class to the body to remove the extra scrollbar and stay above any fixed headers
+    if (isFullScreen && typeof document !== 'undefined') {
+      document.body.classList.add(GRID_IS_FULLSCREEN_CLASSNAME);
+
+      return () => {
+        if (typeof document !== 'undefined') {
+          document.body.classList.remove(GRID_IS_FULLSCREEN_CLASSNAME);
+        }
+      };
+    }
+  }, [isFullScreen]);
 
   const fullScreenSelector = (
-    <EuiButtonIcon
-      size="xs"
-      iconType="fullScreen"
-      color="text"
-      className={controlBtnClasses}
-      data-test-subj="dataGridFullScreenButton"
-      onClick={() => setIsFullScreen(!isFullScreen)}
-      aria-label={isFullScreen ? fullScreenButtonActive : fullScreenButton}
-    />
+    <EuiToolTip
+      content={
+        isFullScreen ? (
+          <>
+            {fullScreenButtonActive} (<kbd>esc</kbd>)
+          </>
+        ) : (
+          fullScreenButton
+        )
+      }
+      delay="long"
+    >
+      <EuiButtonIcon
+        size="xs"
+        iconType="fullScreen"
+        color="text"
+        className={controlBtnClasses}
+        data-test-subj="dataGridFullScreenButton"
+        onClick={() => setIsFullScreen(!isFullScreen)}
+        aria-label={isFullScreen ? fullScreenButtonActive : fullScreenButton}
+      />
+    </EuiToolTip>
   );
 
   return (
diff --git a/src/components/datagrid/controls/style_selector.tsx b/src/components/datagrid/controls/style_selector.tsx
index 7774af44266..694ae72b404 100644
--- a/src/components/datagrid/controls/style_selector.tsx
+++ b/src/components/datagrid/controls/style_selector.tsx
@@ -12,6 +12,7 @@ import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiPopover } from '../../popover';
 import { EuiButtonIcon, EuiButtonGroup } from '../../button';
 import { EuiFormRow } from '../../form';
+import { EuiToolTip } from '../../tool_tip';
 
 export const startingStyles: EuiDataGridStyle = {
   cellPadding: 'm',
@@ -64,6 +65,11 @@ export const useDataGridStyleSelector = (
     ...userGridStyles,
   };
 
+  const buttonLabel = useEuiI18n(
+    'euiStyleSelector.buttonText',
+    'Display options'
+  );
+
   const styleSelector = (
     <EuiPopover
       data-test-subj="dataGridStyleSelectorPopover"
@@ -71,17 +77,19 @@ export const useDataGridStyleSelector = (
       closePopover={() => setIsOpen(false)}
       anchorPosition="downRight"
       panelPaddingSize="s"
-      panelClassName="euiDataGrid__controlPopover"
+      panelClassName="euiDataGrid__displayPopoverPanel"
       button={
-        <EuiButtonIcon
-          size="xs"
-          iconType={`tableDensity${capitalizeDensityString(gridDensity)}`}
-          className="euiDataGrid__controlBtn"
-          color="text"
-          data-test-subj="dataGridStyleSelectorButton"
-          onClick={() => setIsOpen(!isOpen)}
-          aria-label={useEuiI18n('euiStyleSelector.buttonText', 'Grid display')}
-        />
+        <EuiToolTip content={buttonLabel} delay="long">
+          <EuiButtonIcon
+            size="xs"
+            iconType={`tableDensity${capitalizeDensityString(gridDensity)}`}
+            className="euiDataGrid__controlBtn"
+            color="text"
+            data-test-subj="dataGridStyleSelectorButton"
+            onClick={() => setIsOpen(!isOpen)}
+            aria-label={buttonLabel}
+          />
+        </EuiToolTip>
       }
     >
       <EuiI18n
diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
index 334916f1495..9367251978e 100644
--- a/src/components/datagrid/data_grid_types.ts
+++ b/src/components/datagrid/data_grid_types.ts
@@ -221,7 +221,7 @@ export type CommonGridProps = CommonProps &
      */
     gridStyle?: EuiDataGridStyle;
     /**
-     * Accepts either a boolean or #EuiDataGridToolbarVisibilityOptions object. When used as a boolean, defines the display of the toolbar entire. WHen passed an object allows you to turn off individual controls within the toolbar as well as add additional buttons.
+     * Accepts either a boolean or #EuiDataGridToolBarVisibilityOptions object. When used as a boolean, defines the display of the toolbar entire. WHen passed an object allows you to turn off individual controls within the toolbar as well as add additional buttons.
      */
     toolbarVisibility?: boolean | EuiDataGridToolBarVisibilityOptions;
     /**
@@ -609,20 +609,20 @@ export interface EuiDataGridToolBarVisibilityOptions {
   showFullScreenSelector?: boolean;
   /**
    * If passed a `ReactNode`, appends the passed custom control into the left side of the toolbar, after the column & sort controls.
-   * Use #EuiDataGridToolBarAdditionalControlsOptions to customize the location of your control.
+   * Or use #EuiDataGridToolBarAdditionalControlsOptions to customize the location of your control.
    */
   additionalControls?: ReactNode | EuiDataGridToolBarAdditionalControlsOptions;
 }
 
 export interface EuiDataGridToolBarAdditionalControlsOptions {
   /**
-   * Will append the passed node into the left side of the toolbar, after the column & sort controls.
-   * We recommend using `xs`-sized `EuiButtonEmpty`s to match the existing controls on the left.
+   * Will append the passed node into the left side of the toolbar, **after** the column & sort controls.
+   * We recommend using `<EuiButtonEmpty size="xs" />` to match the existing controls on the left.
    */
   left?: ReactNode;
   /**
-   * Will prepend the passed node into the right side of the toolbar, before the density & full screen controls.
-   * We recommend using `xs`-sized `EuiButtonIcons`s to match the existing controls on the right.
+   * Will prepend the passed node into the right side of the toolbar, **before** the density & full screen controls.
+   * We recommend using `<EuiButtonIcon size="xs" />` to match the existing controls on the right.
    */
   right?: ReactNode;
 }