Switch to icontip

elastic · Jan 27, 2022 · 317870f · 317870f
1 parent 78e7f86
commit 317870f
Showing 1 changed file with 11 additions and 13 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,11 +15,10 @@ import {
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
-  EuiIcon,
+  EuiIconTip,
   EuiTitle,
   EuiButtonEmpty,
   EuiText,
-  EuiToolTip,
   EuiSpacer,
   EuiPortal,
   EuiPagination,
@@ -162,7 +161,7 @@ export function DiscoverGridFlyout({
               </EuiButtonEmpty>
             </EuiFlexItem>
             {indexPattern.isTimeBased() && indexPattern.id && (
-              <EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
+              <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
                 <EuiFlexItem grow={false}>
                   <EuiButtonEmpty
                     size="xs"
@@ -180,23 +179,22 @@ export function DiscoverGridFlyout({
                   </EuiButtonEmpty>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
-                  <EuiToolTip
-                    position="right"
+                  <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.',
                       }
                     )}
-                  >
-                    <EuiIcon
-                      size="s"
-                      color="subdued"
-                      type="questionInCircle"
-                      className="eui-alignTop"
-                    />
-                  </EuiToolTip>
+                    type="questionInCircle"
+                    color="subdued"
+                    size="s"
+                    position="right"
+                    iconProps={{
+                      className: 'eui-alignTop',
+                    }}
+                  />
                 </EuiFlexItem>
               </EuiFlexGroup>
             )}