From 5d1734642ee0ca1156c2da525be7574b3d2e3654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Istv=C3=A1n=20Zolt=C3=A1n=20Szab=C3=B3?=
 <szabosteve@gmail.com>
Date: Mon, 21 Feb 2022 11:24:33 +0100
Subject: [PATCH] [ResponseOps] Adds tooltip to time window selector in ES
 query rule flyout (#125764)

---
 .../alert_types/es_query/expression.tsx       | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
index a625d9c193cd65..402d6fca7a1a9d 100644
--- a/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
+++ b/x-pack/plugins/stack_alerts/public/alert_types/es_query/expression.tsx
@@ -13,6 +13,8 @@ import { XJsonMode } from '@kbn/ace';
 import 'brace/theme/github';
 
 import {
+  EuiFlexGroup,
+  EuiFlexItem,
   EuiButtonEmpty,
   EuiSpacer,
   EuiFormRow,
@@ -20,6 +22,7 @@ import {
   EuiText,
   EuiTitle,
   EuiLink,
+  EuiIconTip,
 } from '@elastic/eui';
 import { DocLinksStart, HttpSetup } from 'kibana/public';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
@@ -347,14 +350,31 @@ export const EsQueryAlertTypeExpression: React.FunctionComponent<
         </EuiFormRow>
       )}
       <EuiSpacer />
-      <EuiTitle size="xs">
-        <h5>
-          <FormattedMessage
-            id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
-            defaultMessage="When number of matches"
+      <EuiFlexGroup alignItems="center" responsive={false} gutterSize="none">
+        <EuiFlexItem grow={false}>
+          <EuiTitle size="xs">
+            <h5>
+              <FormattedMessage
+                id="xpack.stackAlerts.esQuery.ui.conditionPrompt"
+                defaultMessage="When number of matches"
+              />
+            </h5>
+          </EuiTitle>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiIconTip
+            position="right"
+            color="subdued"
+            type="questionInCircle"
+            iconProps={{
+              className: 'eui-alignTop',
+            }}
+            content={i18n.translate('xpack.stackAlerts.esQuery.ui.conditionPrompt.toolTip', {
+              defaultMessage: 'The time window defined below applies only to the first rule check.',
+            })}
           />
-        </h5>
-      </EuiTitle>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <EuiSpacer size="s" />
       <ThresholdExpression
         data-test-subj="thresholdExpression"