diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx
index f6098cd994..9375923664 100644
--- a/frontend/src/modules/Servicemap/ServiceMap.tsx
+++ b/frontend/src/modules/Servicemap/ServiceMap.tsx
@@ -10,7 +10,7 @@ import {
 import { Spin } from "antd";
 import styled from "styled-components";
 import { StoreState } from "../../store/reducers";
-import { getGraphData } from "./utils";
+import { getGraphData, getTooltip } from "./utils";
 import SelectService from "./SelectService";
 import { ForceGraph2D } from "react-force-graph";
 
@@ -90,7 +90,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 					fgRef.current.zoomToFit(100, 120);
 				}}
 				graphData={graphData}
-				nodeLabel="id"
+				nodeLabel={getTooltip}
 				linkAutoColorBy={(d) => d.target}
 				linkDirectionalParticles="value"
 				linkDirectionalParticleSpeed={(d) => d.value}
@@ -112,21 +112,7 @@ const ServiceMap = (props: ServiceMapProps) => {
 				onNodeClick={(node) => {
 					const tooltip = document.querySelector(".graph-tooltip");
 					if (tooltip && node) {
-						tooltip.innerHTML = `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
-								<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
-								<div class="keyval">
-									<div class="key">P99 latency:</div>
-									<div class="val">${node.p99 / 1000000}ms</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Request:</div>
-									<div class="val">${node.callRate}/sec</div>
-								</div>
-								<div class="keyval">
-									<div class="key">Error Rate:</div>
-									<div class="val">${node.errorRate}%</div>
-								</div>
-							</div>`;
+						tooltip.innerHTML = getTooltip(node);
 					}
 				}}
 				nodePointerAreaPaint={(node, color, ctx) => {
diff --git a/frontend/src/modules/Servicemap/utils.ts b/frontend/src/modules/Servicemap/utils.ts
index 296cd05060..28295ad2c5 100644
--- a/frontend/src/modules/Servicemap/utils.ts
+++ b/frontend/src/modules/Servicemap/utils.ts
@@ -73,3 +73,26 @@ export const getGraphData = (serviceMap: serviceMapStore): graphDataType => {
 		links,
 	};
 };
+
+export const getTooltip = (node: {
+	p99: number;
+	errorRate: number;
+	callRate: number;
+	id: string;
+}) => {
+	return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
+								<div style="font-weight:bold; margin-bottom:16px;">${node.id}</div>
+								<div class="keyval">
+									<div class="key">P99 latency:</div>
+									<div class="val">${node.p99 / 1000000}ms</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Request:</div>
+									<div class="val">${node.callRate}/sec</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Error Rate:</div>
+									<div class="val">${node.errorRate}%</div>
+								</div>
+							</div>`;
+};