diff --git a/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.jsx b/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.jsx
index dcb2f4f098..c01192e2d7 100644
--- a/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.jsx
+++ b/awx/ui_next/src/components/Workflow/WorkflowActionTooltipItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { func } from 'prop-types';
+import { func, string } from 'prop-types';
 
 const TooltipItem = styled.div`
   align-items: center;
@@ -24,12 +24,14 @@ const TooltipItem = styled.div`
 
 function WorkflowActionTooltipItem({
   children,
+  id,
   onClick,
   onMouseEnter,
   onMouseLeave,
 }) {
   return (
     <TooltipItem
+      id={id}
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
@@ -40,6 +42,7 @@ function WorkflowActionTooltipItem({
 }
 
 WorkflowActionTooltipItem.propTypes = {
+  id: string.isRequired,
   onClick: func,
   onMouseEnter: func,
   onMouseLeave: func,
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.test.jsx
index fb497bb0ee..de1434951e 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Visualizer.test.jsx
@@ -171,7 +171,7 @@ describe('Visualizer', () => {
     wrapper.update();
     expect(wrapper.find('LinkEditModal').length).toBe(0);
     wrapper.find('g#link-2-3').simulate('mouseenter');
-    wrapper.find('#link-edit').simulate('click');
+    wrapper.find('WorkflowActionTooltipItem#link-edit').simulate('click');
     expect(wrapper.find('LinkEditModal').length).toBe(1);
     act(() => {
       wrapper
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.test.jsx
index affdf306ab..6efd3fb478 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerLink.test.jsx
@@ -96,13 +96,17 @@ describe('VisualizerLink', () => {
       .find('g')
       .first()
       .simulate('mouseenter');
-    wrapper.find('#link-add-node').simulate('mouseenter');
+    wrapper
+      .find('WorkflowActionTooltipItem#link-add-node')
+      .simulate('mouseenter');
     expect(updateHelpText).toHaveBeenCalledWith(
       'Add a new node between these two nodes'
     );
-    wrapper.find('#link-add-node').simulate('mouseleave');
+    wrapper
+      .find('WorkflowActionTooltipItem#link-add-node')
+      .simulate('mouseleave');
     expect(updateHelpText).toHaveBeenCalledWith(null);
-    wrapper.find('#link-add-node').simulate('click');
+    wrapper.find('WorkflowActionTooltipItem#link-add-node').simulate('click');
     expect(dispatch).toHaveBeenCalledWith({
       type: 'START_ADD_NODE',
       sourceNodeId: 2,
@@ -116,11 +120,11 @@ describe('VisualizerLink', () => {
       .find('g')
       .first()
       .simulate('mouseenter');
-    wrapper.find('#link-edit').simulate('mouseenter');
+    wrapper.find('WorkflowActionTooltipItem#link-edit').simulate('mouseenter');
     expect(updateHelpText).toHaveBeenCalledWith('Edit this link');
-    wrapper.find('#link-edit').simulate('mouseleave');
+    wrapper.find('WorkflowActionTooltipItem#link-edit').simulate('mouseleave');
     expect(updateHelpText).toHaveBeenCalledWith(null);
-    wrapper.find('#link-edit').simulate('click');
+    wrapper.find('WorkflowActionTooltipItem#link-edit').simulate('click');
     expect(dispatch).toHaveBeenCalledWith({
       type: 'SET_LINK_TO_EDIT',
       value: link,
@@ -133,11 +137,15 @@ describe('VisualizerLink', () => {
       .find('g')
       .first()
       .simulate('mouseenter');
-    wrapper.find('#link-delete').simulate('mouseenter');
+    wrapper
+      .find('WorkflowActionTooltipItem#link-delete')
+      .simulate('mouseenter');
     expect(updateHelpText).toHaveBeenCalledWith('Delete this link');
-    wrapper.find('#link-delete').simulate('mouseleave');
+    wrapper
+      .find('WorkflowActionTooltipItem#link-delete')
+      .simulate('mouseleave');
     expect(updateHelpText).toHaveBeenCalledWith(null);
-    wrapper.find('#link-delete').simulate('click');
+    wrapper.find('WorkflowActionTooltipItem#link-delete').simulate('click');
     expect(dispatch).toHaveBeenCalledWith({
       type: 'START_DELETE_LINK',
       link,
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.test.jsx
index 4f351bca04..4adc0184d8 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.test.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerNode.test.jsx
@@ -86,11 +86,11 @@ describe('VisualizerNode', () => {
 
     test('Add tooltip action hover/click updates help text and dispatches properly', () => {
       wrapper.find('VisualizerNode').simulate('mouseenter');
-      wrapper.find('#node-add').simulate('mouseenter');
+      wrapper.find('WorkflowActionTooltipItem#node-add').simulate('mouseenter');
       expect(updateHelpText).toHaveBeenCalledWith('Add a new node');
-      wrapper.find('#node-add').simulate('mouseleave');
+      wrapper.find('WorkflowActionTooltipItem#node-add').simulate('mouseleave');
       expect(updateHelpText).toHaveBeenCalledWith(null);
-      wrapper.find('#node-add').simulate('click');
+      wrapper.find('WorkflowActionTooltipItem#node-add').simulate('click');
       expect(dispatch).toHaveBeenCalledWith({
         type: 'START_ADD_NODE',
         sourceNodeId: 2,
@@ -100,11 +100,15 @@ describe('VisualizerNode', () => {
 
     test('Edit tooltip action hover/click updates help text and dispatches properly', () => {
       wrapper.find('VisualizerNode').simulate('mouseenter');
-      wrapper.find('#node-edit').simulate('mouseenter');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-edit')
+        .simulate('mouseenter');
       expect(updateHelpText).toHaveBeenCalledWith('Edit this node');
-      wrapper.find('#node-edit').simulate('mouseleave');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-edit')
+        .simulate('mouseleave');
       expect(updateHelpText).toHaveBeenCalledWith(null);
-      wrapper.find('#node-edit').simulate('click');
+      wrapper.find('WorkflowActionTooltipItem#node-edit').simulate('click');
       expect(dispatch).toHaveBeenCalledWith({
         type: 'SET_NODE_TO_EDIT',
         value: nodeWithJT,
@@ -114,11 +118,15 @@ describe('VisualizerNode', () => {
 
     test('Details tooltip action hover/click updates help text and dispatches properly', () => {
       wrapper.find('VisualizerNode').simulate('mouseenter');
-      wrapper.find('#node-details').simulate('mouseenter');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-details')
+        .simulate('mouseenter');
       expect(updateHelpText).toHaveBeenCalledWith('View node details');
-      wrapper.find('#node-details').simulate('mouseleave');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-details')
+        .simulate('mouseleave');
       expect(updateHelpText).toHaveBeenCalledWith(null);
-      wrapper.find('#node-details').simulate('click');
+      wrapper.find('WorkflowActionTooltipItem#node-details').simulate('click');
       expect(dispatch).toHaveBeenCalledWith({
         type: 'SET_NODE_TO_VIEW',
         value: nodeWithJT,
@@ -128,11 +136,15 @@ describe('VisualizerNode', () => {
 
     test('Link tooltip action hover/click updates help text and dispatches properly', () => {
       wrapper.find('VisualizerNode').simulate('mouseenter');
-      wrapper.find('#node-link').simulate('mouseenter');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-link')
+        .simulate('mouseenter');
       expect(updateHelpText).toHaveBeenCalledWith('Link to an available node');
-      wrapper.find('#node-link').simulate('mouseleave');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-link')
+        .simulate('mouseleave');
       expect(updateHelpText).toHaveBeenCalledWith(null);
-      wrapper.find('#node-link').simulate('click');
+      wrapper.find('WorkflowActionTooltipItem#node-link').simulate('click');
       expect(dispatch).toHaveBeenCalledWith({
         type: 'SELECT_SOURCE_FOR_LINKING',
         node: nodeWithJT,
@@ -142,11 +154,15 @@ describe('VisualizerNode', () => {
 
     test('Delete tooltip action hover/click updates help text and dispatches properly', () => {
       wrapper.find('VisualizerNode').simulate('mouseenter');
-      wrapper.find('#node-delete').simulate('mouseenter');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-delete')
+        .simulate('mouseenter');
       expect(updateHelpText).toHaveBeenCalledWith('Delete this node');
-      wrapper.find('#node-delete').simulate('mouseleave');
+      wrapper
+        .find('WorkflowActionTooltipItem#node-delete')
+        .simulate('mouseleave');
       expect(updateHelpText).toHaveBeenCalledWith(null);
-      wrapper.find('#node-delete').simulate('click');
+      wrapper.find('WorkflowActionTooltipItem#node-delete').simulate('click');
       expect(dispatch).toHaveBeenCalledWith({
         type: 'SET_NODE_TO_DELETE',
         value: nodeWithJT,