From fb72a7c90ed9338c15713ffae88bc3274a7ab2f6 Mon Sep 17 00:00:00 2001
From: Lisa Cawley <lcawley@elastic.co>
Date: Fri, 23 Apr 2021 08:35:20 -0700
Subject: [PATCH] [ML] Add tooltip for interval in Anomaly Explorer (#97944)

---
 .../public/application/explorer/explorer.js   | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.js b/x-pack/plugins/ml/public/application/explorer/explorer.js
index e33c09932daab..47d3e154ad325 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer.js
+++ b/x-pack/plugins/ml/public/application/explorer/explorer.js
@@ -21,6 +21,7 @@ import {
   EuiFlexItem,
   EuiFormRow,
   EuiHorizontalRule,
+  EuiIcon,
   EuiIconTip,
   EuiPage,
   EuiPageBody,
@@ -28,6 +29,7 @@ import {
   EuiPageHeaderSection,
   EuiSpacer,
   EuiTitle,
+  EuiToolTip,
   EuiLoadingContent,
   EuiPanel,
   EuiAccordion,
@@ -485,9 +487,21 @@ export class ExplorerUI extends React.Component {
                   </EuiFlexItem>
                   <EuiFlexItem grow={false} style={{ width: '170px' }}>
                     <EuiFormRow
-                      label={i18n.translate('xpack.ml.explorer.intervalLabel', {
-                        defaultMessage: 'Interval',
-                      })}
+                      label={
+                        <EuiToolTip
+                          content={i18n.translate('xpack.ml.explorer.intervalTooltip', {
+                            defaultMessage:
+                              'Show only the highest severity anomaly for each interval (such as hour or day) or show all anomalies in the selected time period.',
+                          })}
+                        >
+                          <span>
+                            {i18n.translate('xpack.ml.explorer.intervalLabel', {
+                              defaultMessage: 'Interval',
+                            })}
+                            <EuiIcon type="questionInCircle" color="subdued" />
+                          </span>
+                        </EuiToolTip>
+                      }
                     >
                       <SelectInterval />
                     </EuiFormRow>