diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index 3f08896422..c6ab84874b 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -2013,3 +2013,20 @@ button.dropdown-toggle,
 #login-modal-body {
     padding-bottom: 5px;
 }
+
+.tooltip.bottom .tooltip-arrow {
+    border-bottom-color: #848992;
+}
+
+.tooltip.Tooltip.fade.bottom.in {
+    opacity: 1;
+    padding-top: 4px;
+}
+
+.tooltip-inner {
+    background-color: #848992;
+}
+
+.tooltip-inner--logOut {
+    margin-left: -15px !important;
+}
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 2b005b06d0..f71bcc496c 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -494,6 +494,13 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
                     placement = (attrs.placement !== undefined && attrs.placement !== null) ? attrs.placement : 'left';
                 }
 
+                var template;
+                if (attrs.tooltipInnerClass) {
+                    template = '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + attrs.tooltipInnerClass + '"></div></div>';
+                } else {
+                    template = '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner"></div></div>';
+                }
+
                 $(element).on('hidden.bs.tooltip', function( ) {
                     // TB3RC1 is leaving behind tooltip <div> elements. This will remove them
                     // after a tooltip fades away. If not, they lay overtop of other elements and
@@ -510,7 +517,7 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
                     title: attrs.awToolTip,
                     container: 'body',
                     trigger: 'hover focus',
-                    template: '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner"></div></div>'
+                    template: template
                 });
 
                 if (attrs.tipWatch) {