diff --git a/awx/ui/src/screens/TopologyView/Legend.js b/awx/ui/src/screens/TopologyView/Legend.js
index 2d729e5737..5fe35beb51 100644
--- a/awx/ui/src/screens/TopologyView/Legend.js
+++ b/awx/ui/src/screens/TopologyView/Legend.js
@@ -1,5 +1,5 @@
-/* eslint-disable i18next/no-literal-string */
 import React from 'react';
+import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
   Button as PFButton,
@@ -62,49 +62,49 @@ function Legend() {
           component={TextVariants.small}
           style={{ fontWeight: 'bold', color: 'black' }}
         >
-          Legend
+          {t`Legend`}
         </Text>
         <Divider component="div" />
-        <Text component={TextVariants.small}>Node types</Text>
+        <Text component={TextVariants.small}>{t`Node types`}</Text>
       </TextContent>
       <DescriptionList isHorizontal isFluid>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              C
+              {t`C`}
             </Button>
           </DescriptionListTerm>
-          <DescriptionListDescription>Control node</DescriptionListDescription>
+          <DescriptionListDescription>{t`Control node`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              Ex
+              {t`Ex`}
             </Button>
           </DescriptionListTerm>
           <DescriptionListDescription>
-            Execution node
+            {t`Execution node`}
           </DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              Hy
+              {t`Hy`}
             </Button>
           </DescriptionListTerm>
-          <DescriptionListDescription>Hybrid node</DescriptionListDescription>
+          <DescriptionListDescription>{t`Hybrid node`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="primary" isSmall>
-              h
+              {t`h`}
             </Button>
           </DescriptionListTerm>
-          <DescriptionListDescription>Hop node</DescriptionListDescription>
+          <DescriptionListDescription>{t`Hop node`}</DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
       <TextContent>
-        <Text component={TextVariants.small}>Status types</Text>
+        <Text component={TextVariants.small}>{t`Status types`}</Text>
       </TextContent>
       <DescriptionList isHorizontal isFluid>
         <DescriptionListGroup>
@@ -115,13 +115,13 @@ function Legend() {
               style={{ border: '1px solid gray', backgroundColor: '#3E8635' }}
             />
           </DescriptionListTerm>
-          <DescriptionListDescription>Healthy</DescriptionListDescription>
+          <DescriptionListDescription>{t`Healthy`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
             <Button variant="danger" icon={<ExclamationIcon />} isSmall />
           </DescriptionListTerm>
-          <DescriptionListDescription>Error</DescriptionListDescription>
+          <DescriptionListDescription>{t`Error`}</DescriptionListDescription>
         </DescriptionListGroup>
         <DescriptionListGroup>
           <DescriptionListTerm>
@@ -130,7 +130,7 @@ function Legend() {
               style={{ border: '1px solid gray', backgroundColor: '#e6e6e6' }}
             />
           </DescriptionListTerm>
-          <DescriptionListDescription>Disabled</DescriptionListDescription>
+          <DescriptionListDescription>{t`Disabled`}</DescriptionListDescription>
         </DescriptionListGroup>
       </DescriptionList>
     </Wrapper>
diff --git a/awx/ui/src/screens/TopologyView/Tooltip.js b/awx/ui/src/screens/TopologyView/Tooltip.js
index 34dae9c8a9..56bf22185d 100644
--- a/awx/ui/src/screens/TopologyView/Tooltip.js
+++ b/awx/ui/src/screens/TopologyView/Tooltip.js
@@ -1,9 +1,5 @@
-/* eslint-disable i18next/no-literal-string,
-jsx-a11y/anchor-is-valid,
-jsx-a11y/click-events-have-key-events,
-jsx-a11y/no-static-element-interactions */
-
 import React from 'react';
+import { t } from '@lingui/macro';
 import styled from 'styled-components';
 import {
   Button as PFButton,
@@ -57,11 +53,11 @@ function Tooltip({
             component={TextVariants.small}
             style={{ fontWeight: 'bold', color: 'black' }}
           >
-            Details
+            {t`Details`}
           </Text>
           <Divider component="div" />
           <Text component={TextVariants.small}>
-            Click on a node icon to display the details.
+            {t`Click on a node icon to display the details.`}
           </Text>
         </TextContent>
       ) : (
@@ -71,7 +67,7 @@ function Tooltip({
               component={TextVariants.small}
               style={{ fontWeight: 'bold', color: 'black' }}
             >
-              Details
+              {t`Details`}
             </Text>
             <Divider component="div" />
           </TextContent>
@@ -83,17 +79,23 @@ function Tooltip({
                 </Button>
               </DescriptionListTerm>
               <DescriptionListDescription>
-                <a onClick={redirectToDetailsPage}>{nodeDetail.hostname}</a>
+                <PFButton
+                  variant="link"
+                  isInline
+                  onClick={redirectToDetailsPage}
+                >
+                  {nodeDetail.hostname}
+                </PFButton>
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
-              <DescriptionListTerm>Type</DescriptionListTerm>
+              <DescriptionListTerm>{t`Type`}</DescriptionListTerm>
               <DescriptionListDescription>
-                {nodeDetail.node_type} node
+                {nodeDetail.node_type} {t`node`}
               </DescriptionListDescription>
             </DescriptionListGroup>
             <DescriptionListGroup>
-              <DescriptionListTerm>Status</DescriptionListTerm>
+              <DescriptionListTerm>{t`Status`}</DescriptionListTerm>
               <DescriptionListDescription>
                 <StatusLabel status={nodeDetail.node_state} />
               </DescriptionListDescription>
diff --git a/awx/ui/src/screens/TopologyView/constants.js b/awx/ui/src/screens/TopologyView/constants.js
index f4538dea63..dbecb633f8 100644
--- a/awx/ui/src/screens/TopologyView/constants.js
+++ b/awx/ui/src/screens/TopologyView/constants.js
@@ -1,4 +1,3 @@
-/* eslint-disable-next-line import/prefer-default-export */
 export const SELECTOR = '#chart';
 export const MESH_FORCE_LAYOUT = {
   defaultCollisionFactor: 80,