diff --git a/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx b/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx
index 4d3ac6e272c49..3d3200faf8095 100644
--- a/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx
+++ b/x-pack/plugins/ml/public/application/components/annotations/annotation_flyout/index.tsx
@@ -435,6 +435,7 @@ export const AnnotationFlyout: FC<any> = (props) => {
       size="m"
       aria-labelledby="Add annotation"
       data-test-subj={'mlAnnotationFlyout'}
+      className={'mlAnnotationFlyout'}
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="s">
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss
index 8c2d139157602..a7186597b4135 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/_timeseriesexplorer_annotations.scss
@@ -56,6 +56,9 @@ $mlAnnotationRectDefaultFillOpacity: .05;
 
   fill: $euiColorFullShade;
   transition: fill $euiAnimSpeedFast;
+
+  user-select: none;
+
 }
 
 .mlAnnotationText-isBlur {
diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
index 8180aaa452148..7a44a0ccdec4d 100644
--- a/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
+++ b/x-pack/plugins/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart_annotations.ts
@@ -132,6 +132,19 @@ export function renderAnnotations(
   const levelHeight = ANNOTATION_LEVEL_HEIGHT;
   const levels = getAnnotationLevels(focusAnnotationData);
 
+  const onAnnotationMouseOver = function (this: object, d: Annotation) {
+    showFocusChartTooltip(d, this);
+  };
+
+  const onAnnotationClick = (d: Annotation) => {
+    // clear a possible existing annotation previously set for editing before setting the new one.
+    // this needs to be done explicitly here because a new annotation created using the brush tool
+    // could still be present in the chart.
+    annotationUpdatesService.setValue(null);
+    // set the actual annotation and trigger the flyout
+    annotationUpdatesService.setValue(d);
+  };
+
   const annotations = focusChart
     .select('.mlAnnotations')
     .selectAll('g.mlAnnotation')
@@ -148,18 +161,9 @@ export function renderAnnotations(
     .attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
     .classed('mlAnnotationRect', true)
     .attr('mask', `url(#${ANNOTATION_MASK_ID})`)
-    .on('mouseover', function (this: object, d: Annotation) {
-      showFocusChartTooltip(d, this);
-    })
-    .on('mouseout', () => hideFocusChartTooltip())
-    .on('click', (d: Annotation) => {
-      // clear a possible existing annotation set up for editing before setting the new one.
-      // this needs to be done explicitly here because a new annotation created using the brush tool
-      // could still be present in the chart.
-      annotationUpdatesService.setValue(null);
-      // set the actual annotation and trigger the flyout
-      annotationUpdatesService.setValue(d);
-    });
+    .on('mouseover', onAnnotationMouseOver)
+    .on('mouseout', hideFocusChartTooltip)
+    .on('click', onAnnotationClick);
 
   rects
     .attr('x', (d: Annotation) => {
@@ -196,9 +200,18 @@ export function renderAnnotations(
     .attr('width', ANNOTATION_TEXT_RECT_WIDTH)
     .attr('height', ANNOTATION_TEXT_RECT_HEIGHT)
     .attr('rx', ANNOTATION_RECT_BORDER_RADIUS)
-    .attr('ry', ANNOTATION_RECT_BORDER_RADIUS);
+    .attr('ry', ANNOTATION_RECT_BORDER_RADIUS)
+    .on('mouseover', onAnnotationMouseOver)
+    .on('mouseout', hideFocusChartTooltip)
+    .on('click', onAnnotationClick);
 
-  texts.enter().append('text').classed('mlAnnotationText', true);
+  texts
+    .enter()
+    .append('text')
+    .classed('mlAnnotationText', true)
+    .on('mouseover', onAnnotationMouseOver)
+    .on('mouseout', hideFocusChartTooltip)
+    .on('click', onAnnotationClick);
 
   function labelXOffset(ts: number) {
     const earliestMs = focusXScale.domain()[0];