diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx
new file mode 100644
index 0000000000000..458663bb5b123
--- /dev/null
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.test.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import { LabelWithTooltip } from './label_with_tooltip';
+
+describe('LabelWithTooltip', () => {
+ it('renders label and tooltip content', async () => {
+ const { getByText } = render(
+
+ );
+ const infoElement = getByText('Info');
+
+ fireEvent.mouseOver(infoElement);
+ await waitFor(() => {
+ expect(getByText('Tooltip')).toBeInTheDocument();
+ });
+ expect(getByText('Label')).toBeInTheDocument();
+ });
+});
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx
new file mode 100644
index 0000000000000..b9a5304fc6e60
--- /dev/null
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/label_with_tooltip.tsx
@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+
+export function LabelWithTooltip({
+ labelContent,
+ tooltipContent,
+}: {
+ labelContent: string;
+ tooltipContent: string;
+}) {
+ return (
+
+ {labelContent}
+
+
+
+
+ );
+}
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx
index 935ed8b2de843..53db810ffb043 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_dashboards.tsx
@@ -21,7 +21,12 @@ import type { ContentManagementPublicStart } from '@kbn/content-management-plugi
import { OptionalFieldLabel } from '../optional_field_label';
import { dashboardServiceProvider, type DashboardItem } from '../common/services/dashboard_service';
import { useRuleFormState, useRuleFormDispatch } from '../hooks';
-import { ALERT_LINK_DASHBOARDS_TITLE, ALERT_LINK_DASHBOARDS_PLACEHOLDER } from '../translations';
+import {
+ ALERT_LINK_DASHBOARDS_TITLE,
+ ALERT_LINK_DASHBOARDS_PLACEHOLDER,
+ ALERT_LINK_DASHBOARDS_LABEL_TOOLTIP_CONTENT,
+} from '../translations';
+import { LabelWithTooltip } from './label_with_tooltip';
export interface Props {
contentManagement: ContentManagementPublicStart;
@@ -167,7 +172,12 @@ export const RuleDashboards = ({ contentManagement }: Props) => {
+ }
fullWidth
labelAppend={OptionalFieldLabel}
>
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
index 8d0267acdda46..046ef4fd34520 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
+++ b/src/platform/packages/shared/response-ops/rule_form/src/rule_details/rule_details.tsx
@@ -16,12 +16,10 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiSpacer,
- EuiIconTip,
} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
import {
RULE_INVESTIGATION_GUIDE_LABEL,
+ RULE_INVESTIGATION_GUIDE_LABEL_TOOLTIP_CONTENT,
RULE_NAME_INPUT_TITLE,
RULE_TAG_INPUT_TITLE,
RULE_TAG_PLACEHOLDER,
@@ -31,6 +29,7 @@ import { OptionalFieldLabel } from '../optional_field_label';
import { InvestigationGuideEditor } from './rule_investigation_guide_editor';
import { RuleDashboards } from './rule_dashboards';
import { MAX_ARTIFACTS_INVESTIGATION_GUIDE_LENGTH } from '../constants';
+import { LabelWithTooltip } from './label_with_tooltip';
export const RULE_DETAIL_MIN_ROW_WIDTH = 600;
@@ -143,25 +142,10 @@ export const RuleDetails = () => {
- {RULE_INVESTIGATION_GUIDE_LABEL}
-
-
- {i18n.translate(
- 'responseOpsRuleForm.ruleDetails.investigationGuideFormRow.toolTip.content',
- {
- defaultMessage:
- 'These details will be included in a new tab on the alert details page for every alert triggered by this rule.',
- }
- )}
-
- }
- />
-
-
+
}
labelAppend={OptionalFieldLabel}
isInvalid={
diff --git a/src/platform/packages/shared/response-ops/rule_form/src/translations.ts b/src/platform/packages/shared/response-ops/rule_form/src/translations.ts
index b3eb526a973e5..8e484b83aa2fc 100644
--- a/src/platform/packages/shared/response-ops/rule_form/src/translations.ts
+++ b/src/platform/packages/shared/response-ops/rule_form/src/translations.ts
@@ -110,6 +110,14 @@ export const ALERT_LINK_DASHBOARDS_TITLE = i18n.translate(
}
);
+export const ALERT_LINK_DASHBOARDS_LABEL_TOOLTIP_CONTENT = i18n.translate(
+ 'responseOpsRuleForm.ruleForm.ruleDefinition.alertLinkDashboards.label.tooltipContent',
+ {
+ defaultMessage:
+ 'Visualize data from various sources to investigate alerts generated by this rule. Alerts will include links to the dashboards you choose.',
+ }
+);
+
export const ALERT_LINK_DASHBOARDS_PLACEHOLDER = i18n.translate(
'responseOpsRuleForm.ruleForm.ruleDefinition.alertLinkDashboardsTitle',
{
@@ -311,6 +319,14 @@ export const RULE_INVESTIGATION_GUIDE_LABEL = i18n.translate(
}
);
+export const RULE_INVESTIGATION_GUIDE_LABEL_TOOLTIP_CONTENT = i18n.translate(
+ 'responseOpsRuleForm.ruleDetails.investigationGuideFormRow.toolTip.content',
+ {
+ defaultMessage:
+ 'These details will be included in a new tab on the alert details page for every alert triggered by this rule.',
+ }
+);
+
export const RULE_NAME_ARIA_LABEL_TEXT = i18n.translate(
'responseOpsRuleForm.ruleForm.rulePage.ruleNameAriaLabelText',
{