diff --git a/awx/ui/client/legacy-styles/ansible-ui.less b/awx/ui/client/legacy-styles/ansible-ui.less
index c2d59dc1b6..28b5d999ed 100644
--- a/awx/ui/client/legacy-styles/ansible-ui.less
+++ b/awx/ui/client/legacy-styles/ansible-ui.less
@@ -464,17 +464,6 @@ textarea.allowresize {
       }
   }
 
-.tooltip {
-  z-index: 2050;
-  opacity: 1.0;
-}
-
-.tooltip-inner {
-  padding: 10px;
-  text-align:left;
-  max-width: 150px;
-}
-
 .alert {
     margin-top: 15px;
     margin-bottom: 15px;
@@ -2031,40 +2020,6 @@ tr td button i {
     padding-bottom: 5px;
 }
 
-.tooltip.bottom .tooltip-arrow {
-    border-bottom-color: @default-interface-txt;
-}
-
-
-.tooltip.top .tooltip-arrow {
-    border-top-color: @default-interface-txt;
-}
-
-.tooltip.left .tooltip-arrow {
-    border-left-color: @default-interface-txt;
-}
-
-.tooltip.right .tooltip-arrow {
-    border-right-color: @default-interface-txt;
-}
-
-.tooltip.Tooltip.fade.bottom.in {
-    opacity: 1;
-    padding-top: 4px;
-}
-
-.tooltip.in {
-    opacity: 1;
-}
-
-.tooltip-inner {
-    background-color: @default-interface-txt;
-}
-
-.tooltip-inner--logOut {
-    margin-left: -15px !important;
-}
-
 .modal {
     transition: all 0.3s ease-out !important;
 }
diff --git a/awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.directive.js b/awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.directive.js
index ac0334cc64..e180289984 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.directive.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/list/host-summary-popover/host-summary-popover.directive.js
@@ -44,7 +44,7 @@ export default ['templateUrl', 'Wait', '$filter', '$compile', 'i18n',
                 }
 
                 scope.generateTable = function(data, event){
-                    var html, title = "Recent Jobs";
+                    var html, title = (scope.inventory.has_active_failures) ? "Recent Failed Jobs" : "Recent Successful Jobs";
                     Wait('stop');
                     if (data.count > 0) {
                         html = "<table class=\"table table-condensed flyout\" style=\"width: 100%\">\n";
@@ -60,10 +60,10 @@ export default ['templateUrl', 'Wait', '$filter', '$compile', 'i18n',
                         data.results.forEach(function(row) {
                             html += "<tr>\n";
                             html += "<td><a href=\"\" ng-click=\"viewJob(" + row.id + ")\" " + "aw-tool-tip=\"" + row.status.charAt(0).toUpperCase() + row.status.slice(1) +
-                                ". Click for details\" aw-tip-placement=\"top\"><i class=\"fa SmartStatus-tooltip--" + row.status + " icon-job-" + row.status + "\"></i></a></td>\n";
+                                ". Click for details\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\"><i class=\"fa SmartStatus-tooltip--" + row.status + " icon-job-" + row.status + "\"></i></a></td>\n";
                             html += "<td>" + ($filter('longDate')(row.finished)) + "</td>";
                             html += "<td><a href=\"\" ng-click=\"viewJob(" + row.id + ")\" " + "aw-tool-tip=\"" + row.status.charAt(0).toUpperCase() + row.status.slice(1) +
-                                ". Click for details\" aw-tip-placement=\"top\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
+                                ". Click for details\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
                             html += "</tr>\n";
                         });
                         html += "</tbody>\n";
diff --git a/awx/ui/client/src/inventories-hosts/inventories/list/source-summary-popover/source-summary-popover.directive.js b/awx/ui/client/src/inventories-hosts/inventories/list/source-summary-popover/source-summary-popover.directive.js
index df340ddeda..391c9d20a8 100644
--- a/awx/ui/client/src/inventories-hosts/inventories/list/source-summary-popover/source-summary-popover.directive.js
+++ b/awx/ui/client/src/inventories-hosts/inventories/list/source-summary-popover/source-summary-popover.directive.js
@@ -61,14 +61,14 @@ export default ['templateUrl', '$compile', 'Wait', '$filter', 'i18n',
                     data.results.forEach( function(row) {
                         if (row.related.last_update) {
                             html += "<tr>";
-                            html += `<td><a href="" ng-click="viewJob('${row.related.last_update}')" aw-tool-tip="${row.status.charAt(0).toUpperCase() + row.status.slice(1)}. ` + i18n._("Click for details") + `" aw-tip-placement="top"><i class="SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></a></td>`;
+                            html += `<td><a href="" ng-click="viewJob('${row.related.last_update}')" aw-tool-tip="${row.status.charAt(0).toUpperCase() + row.status.slice(1)}. ` + i18n._("Click for details") + `"  data-tooltip-outer-class=\"Tooltip-secondary\" aw-tip-placement="top"><i class="SmartStatus-tooltip--${row.status} fa icon-job-${row.status}"></i></a></td>`;
                             html += "<td>" + ($filter('longDate')(row.last_updated)) + "</td>";
                             html += "<td><a href=\"\" ng-click=\"viewJob('" + row.related.last_update + "')\">" + $filter('sanitize')(ellipsis(row.name)) + "</a></td>";
                             html += "</tr>\n";
                         }
                         else {
                             html += "<tr>";
-                            html += "<td><a href=\"\" aw-tool-tip=\"No sync data\" aw-tip-placement=\"top\"><i class=\"fa icon-job-none\"></i></a></td>";
+                            html += "<td><a href=\"\" aw-tool-tip=\"No sync data\" aw-tip-placement=\"top\" data-tooltip-outer-class=\"Tooltip-secondary\"><i class=\"fa icon-job-none\"></i></a></td>";
                             html += "<td>NA</td>";
                             html += "<td><span>" + $filter('sanitize')(ellipsis(row.name)) + "</span></td>";
                             html += "</tr>\n";
diff --git a/awx/ui/client/src/shared/directives.js b/awx/ui/client/src/shared/directives.js
index 64f542c1d8..884b00dc9d 100644
--- a/awx/ui/client/src/shared/directives.js
+++ b/awx/ui/client/src/shared/directives.js
@@ -814,13 +814,12 @@ function(ConfigurationUtils, i18n, $rootScope) {
 
             container = attrs.container ? attrs.container : 'body';
 
-            var template, custom_class;
-            if (attrs.tooltipInnerClass || attrs.tooltipinnerclass) {
-                custom_class = attrs.tooltipInnerClass || attrs.tooltipinnerclass;
-                template = '<div class="tooltip Tooltip" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + custom_class + '"></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>';
-            }
+            var template;
+
+            let tooltipInnerClass = (attrs.tooltipInnerClass || attrs.tooltipinnerclass) ? (attrs.tooltipInnerClass || attrs.tooltipinnerclass) : '';
+            let tooltipOuterClass = attrs.tooltipOuterClass ? attrs.tooltipOuterClass : '';
+
+            template = '<div class="tooltip Tooltip ' + tooltipOuterClass + '" role="tooltip"><div class="tooltip-arrow Tooltip-arrow"></div><div class="tooltip-inner Tooltip-inner ' + tooltipInnerClass + '"></div></div>';
 
             // This block helps clean up tooltips that may get orphaned by a click event
             $(element).on('mouseenter', function() {
diff --git a/awx/ui/client/src/tooltip/tooltip.block.less b/awx/ui/client/src/tooltip/tooltip.block.less
index e51483507a..bfc3cea871 100644
--- a/awx/ui/client/src/tooltip/tooltip.block.less
+++ b/awx/ui/client/src/tooltip/tooltip.block.less
@@ -1,4 +1,47 @@
 /** @define Tooltip */
+.tooltip.bottom .tooltip-arrow {
+    border-bottom-color: @default-interface-txt;
+}
+
+.tooltip.top .tooltip-arrow {
+    border-top-color: @default-interface-txt;
+}
+
+.tooltip.left .tooltip-arrow {
+    border-left-color: @default-interface-txt;
+}
+
+.tooltip.right .tooltip-arrow {
+    border-right-color: @default-interface-txt;
+}
+
+.tooltip.Tooltip.fade.bottom.in {
+    opacity: 1;
+    padding-top: 4px;
+}
+
+.tooltip.in {
+    opacity: 1;
+}
+
+.tooltip-inner {
+    background-color: @default-interface-txt;
+}
+
+.tooltip-inner--logOut {
+    margin-left: -15px !important;
+}
+
+.tooltip {
+  z-index: 2050;
+  opacity: 1.0;
+}
+
+.tooltip-inner {
+  padding: 10px;
+  text-align:left;
+  max-width: 150px;
+}
 
 .Tooltip-inner {
     white-space: pre-wrap;
@@ -7,3 +50,33 @@
 .Tooltip-wide {
     max-width: 300px!important;
 }
+
+.Tooltip-secondary {
+    .Tooltip-inner {
+        background-color: @default-icon;
+    }
+}
+
+.Tooltip-secondary.top {
+    .Tooltip-arrow {
+        border-top-color: @default-icon;
+    }
+}
+
+.Tooltip-secondary.bottom {
+    .Tooltip-arrow {
+        border-bottom-color: @default-icon;
+    }
+}
+
+.Tooltip-secondary.left {
+    .Tooltip-arrow {
+        border-left-color: @default-icon;
+    }
+}
+
+.Tooltip-secondary.right {
+    .Tooltip-arrow {
+        border-right-color: @default-icon;
+    }
+}