diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
index 0ce07a3c0ad27..3d1572689c5bf 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/index.tsx
@@ -53,6 +53,17 @@ const AppLink = styled(TransactionOverviewLink)`
   ${truncate('100%')};
 `;
 
+const ToolTipWrapper = styled.span`
+  width: 100%;
+  .apmServiceList__serviceNameTooltip {
+    width: 100%;
+    .apmServiceList__serviceNameContainer {
+      // removes 24px referent to the icon placed on the left side of the text.
+      width: calc(100% - 24px);
+    }
+  }
+`;
+
 export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
   {
     field: 'healthStatus',
@@ -77,24 +88,27 @@ export const SERVICE_COLUMNS: Array<ITableColumn<ServiceListItem>> = [
     width: '40%',
     sortable: true,
     render: (_, { serviceName, agentName }) => (
-      <EuiToolTip
-        delay="long"
-        content={formatString(serviceName)}
-        id="service-name-tooltip"
-      >
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          {agentName && (
-            <EuiFlexItem grow={false}>
-              <AgentIcon agentName={agentName} />
+      <ToolTipWrapper>
+        <EuiToolTip
+          delay="long"
+          content={formatString(serviceName)}
+          id="service-name-tooltip"
+          anchorClassName="apmServiceList__serviceNameTooltip"
+        >
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            {agentName && (
+              <EuiFlexItem grow={false}>
+                <AgentIcon agentName={agentName} />
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem className="apmServiceList__serviceNameContainer">
+              <AppLink serviceName={serviceName} className="eui-textTruncate">
+                {formatString(serviceName)}
+              </AppLink>
             </EuiFlexItem>
-          )}
-          <EuiFlexItem>
-            <AppLink serviceName={serviceName}>
-              {formatString(serviceName)}
-            </AppLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiToolTip>
+          </EuiFlexGroup>
+        </EuiToolTip>
+      </ToolTipWrapper>
     ),
   },
   {
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap
index ee3a4fce0dbaa..611ee4e07134c 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/service_overview.test.tsx.snap
@@ -128,7 +128,7 @@ NodeList [
 
 exports[`Service Overview -> View should render services, when list is not empty 1`] = `
 NodeList [
-  .c0 {
+  .c1 {
   font-size: 16px;
   max-width: 100%;
   white-space: nowrap;
@@ -136,6 +136,18 @@ NodeList [
   text-overflow: ellipsis;
 }
 
+.c0 {
+  width: 100%;
+}
+
+.c0 .apmServiceList__serviceNameTooltip {
+  width: 100%;
+}
+
+.c0 .apmServiceList__serviceNameTooltip .apmServiceList__serviceNameContainer {
+  width: calc(100% - 24px);
+}
+
 <tr
     class="euiTableRow"
   >
@@ -181,32 +193,36 @@ NodeList [
         class="euiTableCellContent euiTableCellContent--overflowingContent"
       >
         <span
-          class="euiToolTipAnchor"
+          class="c0"
         >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <span
+            class="euiToolTipAnchor apmServiceList__serviceNameTooltip"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <img
-                alt="python"
-                height="24px"
-                src="test-file-stub"
-              />
-            </div>
-            <div
-              class="euiFlexItem"
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <a
-                class="euiLink euiLink--primary c0"
-                href="/basepath/app/apm/services/My Python Service/transactions"
-                rel="noreferrer"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <img
+                  alt="python"
+                  height="24px"
+                  src="test-file-stub"
+                />
+              </div>
+              <div
+                class="euiFlexItem apmServiceList__serviceNameContainer"
               >
-                My Python Service
-              </a>
+                <a
+                  class="euiLink euiLink--primary c1 eui-textTruncate"
+                  href="/basepath/app/apm/services/My Python Service/transactions"
+                  rel="noreferrer"
+                >
+                  My Python Service
+                </a>
+              </div>
             </div>
-          </div>
+          </span>
         </span>
       </div>
     </td>
@@ -401,7 +417,7 @@ NodeList [
       </div>
     </td>
   </tr>,
-  .c0 {
+  .c1 {
   font-size: 16px;
   max-width: 100%;
   white-space: nowrap;
@@ -409,6 +425,18 @@ NodeList [
   text-overflow: ellipsis;
 }
 
+.c0 {
+  width: 100%;
+}
+
+.c0 .apmServiceList__serviceNameTooltip {
+  width: 100%;
+}
+
+.c0 .apmServiceList__serviceNameTooltip .apmServiceList__serviceNameContainer {
+  width: calc(100% - 24px);
+}
+
 <tr
     class="euiTableRow"
   >
@@ -454,32 +482,36 @@ NodeList [
         class="euiTableCellContent euiTableCellContent--overflowingContent"
       >
         <span
-          class="euiToolTipAnchor"
+          class="c0"
         >
-          <div
-            class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+          <span
+            class="euiToolTipAnchor apmServiceList__serviceNameTooltip"
           >
             <div
-              class="euiFlexItem euiFlexItem--flexGrowZero"
-            >
-              <img
-                alt="go"
-                height="24px"
-                src="test-file-stub"
-              />
-            </div>
-            <div
-              class="euiFlexItem"
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
-              <a
-                class="euiLink euiLink--primary c0"
-                href="/basepath/app/apm/services/My Go Service/transactions"
-                rel="noreferrer"
+              <div
+                class="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <img
+                  alt="go"
+                  height="24px"
+                  src="test-file-stub"
+                />
+              </div>
+              <div
+                class="euiFlexItem apmServiceList__serviceNameContainer"
               >
-                My Go Service
-              </a>
+                <a
+                  class="euiLink euiLink--primary c1 eui-textTruncate"
+                  href="/basepath/app/apm/services/My Go Service/transactions"
+                  rel="noreferrer"
+                >
+                  My Go Service
+                </a>
+              </div>
             </div>
-          </div>
+          </span>
         </span>
       </div>
     </td>