Add tooltip for Surrounding documents (#123890)

Co-authored-by: Andrea Del Rio <delrio.andre@gmail.com>
elastic · Feb 16, 2022 · 82c2148 · 82c2148
1 parent 3dd2d75
commit 82c2148
Showing 1 changed file with 39 additions and 14 deletions.
diff --git a/src/plugins/discover/public/components/discover_grid/discover_grid_flyout.tsx b/src/plugins/discover/public/components/discover_grid/discover_grid_flyout.tsx
@@ -15,6 +15,7 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
+  EuiIconTip,
   EuiTitle,
   EuiButtonEmpty,
   EuiText,
@@ -147,7 +148,8 @@ export function DiscoverGridFlyout({
             </EuiHideFor>
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
-                size="xs"
+                size="s"
+                iconSize="s"
                 iconType="document"
                 flush="left"
                 data-test-subj="docTableRowAction"
@@ -159,19 +161,42 @@ export function DiscoverGridFlyout({
               </EuiButtonEmpty>
             </EuiFlexItem>
             {indexPattern.isTimeBased() && indexPattern.id && (
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  size="xs"
-                  iconType="documents"
-                  flush="left"
-                  {...surrDocsProps}
-                  data-test-subj="docTableRowAction"
-                >
-                  {i18n.translate('discover.grid.tableRow.viewSurroundingDocumentsLinkTextSimple', {
-                    defaultMessage: 'Surrounding documents',
-                  })}
-                </EuiButtonEmpty>
-              </EuiFlexItem>
+              <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
+                <EuiFlexItem grow={false}>
+                  <EuiButtonEmpty
+                    size="s"
+                    iconSize="s"
+                    iconType="documents"
+                    flush="left"
+                    {...surrDocsProps}
+                    data-test-subj="docTableRowAction"
+                  >
+                    {i18n.translate(
+                      'discover.grid.tableRow.viewSurroundingDocumentsLinkTextSimple',
+                      {
+                        defaultMessage: 'Surrounding documents',
+                      }
+                    )}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiIconTip
+                    content={i18n.translate(
+                      'discover.grid.tableRow.viewSurroundingDocumentsHover',
+                      {
+                        defaultMessage:
+                          'Inspect documents that occurred before and after this document. Only pinned filters remain active in the Surrounding documents view.',
+                      }
+                    )}
+                    type="questionInCircle"
+                    color="subdued"
+                    position="right"
+                    iconProps={{
+                      className: 'eui-alignTop',
+                    }}
+                  />
+                </EuiFlexItem>
+              </EuiFlexGroup>
             )}
             {activePage !== -1 && (
               <EuiFlexItem data-test-subj={`dscDocNavigationPage-${activePage}`}>