diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
index d28161e171..c4fbe9c1d9 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.html
@@ -1,30 +1,28 @@
-<div (mouseenter)="onMouseEnter()" (mouseleave)="onMouseLeave()">
-	<mat-select
-		[panelClass]="'cc-metric-chooser'"
-		[value]="selectedMetricName"
-		(selectionChange)="handleMetricChanged($event.value)"
-		(openedChange)="handleOpenedChanged($event)"
-		[disabled]="isDisabled"
-		*ngIf="attributeDescriptors$ | async as attributeDescriptors"
-	>
-		<mat-select-trigger>{{ selectedMetricName }}</mat-select-trigger>
-		<mat-form-field class="cc-metric-chooser-search-field">
-			<i matPrefix class="fa fa-search search-icon"></i>
-			<input #searchTermInput matInput type="text" [placeholder]="searchPlaceholder" [(ngModel)]="searchTerm" />
-		</mat-form-field>
-		<div class="cc-metric-chooser-option-container">
-			<mat-option
-				*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm : searchTerm"
-				[value]="option.name"
-				[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip : option.name"
-			>
-				{{ option.name }}
-				<span class="metric-max-value">({{ option.maxValue }})</span><br />
-				<span class="metric-subtitle" *ngIf="attributeDescriptors[option.name]?.description as descriptorSubtitle">
-					{{ descriptorSubtitle }}
-				</span>
-			</mat-option>
-		</div>
-	</mat-select>
-	<ng-content select="[hoveredInformation]" *ngIf="!isHovered"></ng-content>
-</div>
+<mat-select
+	[panelClass]="'cc-metric-chooser'"
+	[value]="selectedMetricName"
+	(selectionChange)="handleMetricChanged($event.value)"
+	(openedChange)="handleOpenedChanged($event)"
+	[disabled]="isDisabled"
+	*ngIf="attributeDescriptors$ | async as attributeDescriptors"
+>
+	<mat-select-trigger>{{ selectedMetricName }}</mat-select-trigger>
+	<mat-form-field class="cc-metric-chooser-search-field">
+		<i matPrefix class="fa fa-search search-icon"></i>
+		<input #searchTermInput matInput type="text" [placeholder]="searchPlaceholder" [(ngModel)]="searchTerm" />
+	</mat-form-field>
+	<div class="cc-metric-chooser-option-container">
+		<mat-option
+			*ngFor="let option of metricData$ | async | filterMetricDataBySearchTerm : searchTerm"
+			[value]="option.name"
+			[title]="attributeDescriptors[option.name] | attributeDescriptorTooltip : option.name"
+		>
+			{{ option.name }}
+			<span class="metric-max-value">({{ option.maxValue }})</span><br />
+			<span class="metric-subtitle" *ngIf="attributeDescriptors[option.name]?.description as descriptorSubtitle">
+				{{ descriptorSubtitle }}
+			</span>
+		</mat-option>
+	</div>
+</mat-select>
+<ng-content select="[hoveredInformation]" *ngIf="!hideMetricSum"></ng-content>
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
index d1068a5b94..70aba61ff1 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.scss
@@ -26,6 +26,10 @@ cc-metric-chooser {
 	}
 }
 
+cc-metric-chooser:hover .metric-value {
+	display: none;
+}
+
 .mat-mdc-select-panel.cc-metric-chooser {
 	margin-top: 16px;
 	overflow: hidden;
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
index 56557923ed..66a6952a6e 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.spec.ts
@@ -1,19 +1,22 @@
-import { Component } from "@angular/core"
+import { Component, ViewChild } from "@angular/core"
 import { TestBed } from "@angular/core/testing"
+import { MatSelectModule } from "@angular/material/select"
 import { expect } from "@jest/globals"
-import { render, screen } from "@testing-library/angular"
-import userEvent from "@testing-library/user-event"
-import { MetricChooserComponent } from "./metricChooser.component"
-import { MetricChooserModule } from "./metricChooser.module"
 import { provideMockStore } from "@ngrx/store/testing"
+import { getByText, queryByText, render, screen, waitFor } from "@testing-library/angular"
+import userEvent from "@testing-library/user-event"
+import { MaterialModule } from "../../../material/material.module"
 import { metricDataSelector } from "../../state/selectors/accumulatedData/metricData/metricData.selector"
 import { attributeDescriptorsSelector } from "../../state/store/fileSettings/attributeDescriptors/attributeDescriptors.selector"
 import { TEST_ATTRIBUTE_DESCRIPTORS_FULL } from "../../util/dataMocks"
+import { MetricChooserComponent } from "./metricChooser.component"
+import { MetricChooserModule } from "./metricChooser.module"
 
 describe("metricChooserComponent", () => {
 	beforeEach(() => {
 		TestBed.configureTestingModule({
-			imports: [MetricChooserModule],
+			declarations: [MetricChooserComponent],
+			imports: [MetricChooserModule, MatSelectModule, MaterialModule],
 			providers: [
 				provideMockStore({
 					selectors: [
@@ -130,4 +133,37 @@ describe("metricChooserComponent", () => {
 
 		expect(container.lastChild.textContent).toBe("projected hovered information")
 	})
+
+	it("should hide metric sum field when options menu is opened", async () => {
+		const content = "Projected content"
+		const metricChooserTemplate = `
+			<cc-metric-chooser>
+				<div hoveredInformation class="metric-value">${content}</div>
+			</cc-metric-chooser>
+		`
+
+		@Component({
+			template: metricChooserTemplate
+		})
+		class WrapperComponent {
+			@ViewChild(MetricChooserComponent, { static: true }) metricChooserComponentRef: MetricChooserComponent
+		}
+
+		const { container, fixture } = await render(WrapperComponent, {
+			declarations: [MetricChooserComponent, WrapperComponent]
+		})
+
+		const metricChooserComponent: MetricChooserComponent = fixture.debugElement.componentInstance.metricChooserComponentRef
+
+		expect(metricChooserComponent).not.toBeNull()
+		await waitFor(() => {
+			expect(getByText(container as HTMLElement, content)).not.toBeNull()
+		})
+
+		metricChooserComponent.handleOpenedChanged(true)
+
+		await waitFor(() => {
+			expect(queryByText(container as HTMLElement, content)).toBeNull()
+		})
+	})
 })
diff --git a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
index 40dc106a4e..6c2b554b5d 100644
--- a/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
+++ b/visualization/app/codeCharta/ui/metricChooser/metricChooser.component.ts
@@ -23,8 +23,7 @@ export class MetricChooserComponent implements OnInit {
 	searchTerm = ""
 	metricData$: Observable<NodeMetricData[] | EdgeMetricData[]>
 	attributeDescriptors$ = this.store.select(attributeDescriptorsSelector)
-	isHovered = false
-	isOpened = false
+	hideMetricSum = false
 
 	constructor(private store: Store<CcState>) {}
 
@@ -37,19 +36,10 @@ export class MetricChooserComponent implements OnInit {
 	handleOpenedChanged(opened: boolean) {
 		if (opened) {
 			this.searchTermInput.nativeElement.focus()
+			this.hideMetricSum = true
 		} else {
 			this.searchTerm = ""
-		}
-		this.isOpened = opened
-	}
-
-	onMouseEnter() {
-		this.isHovered = true
-	}
-
-	onMouseLeave() {
-		if (!this.isOpened) {
-			this.isHovered = false
+			this.hideMetricSum = false
 		}
 	}
 }