Set guided tour close button styles, override hopscotch image setting.

dist/less/_guided-tour.less

@@ -97,8 +97,22 @@ div.hopscotch-bubble {
   }
 
   .hopscotch-bubble-close {
+    background: none;
+    color: transparent;
+    line-height: 0;
     right: 8px;
+    text-indent: inherit;
     top: 7px;
+    &:after {
+      color: @color-pf-black-500;
+      content: @pficon-var-close;
+      display: inline-block;
+      font-family: "PatternFlyIcons-webfont";
+      left: 7px;
+      line-height: 1;
+      position: absolute;
+      top: 7px;
+    }
   }
 
   .hopscotch-bubble-container {

dist/origin-web-common-ui.js

@@ -1903,7 +1903,8 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
       showPrevButton: true,
       i18n: {
         nextBtn: 'Next >',
-        prevBtn: '< Back'
+        prevBtn: '< Back',
+        closeTooltip: 'x'  // this is the button text not a tooltip, hidden but must be 1 character for focus border (cannot but empty or null)
       }
     };
     hopscotchConfig = {};

dist/origin-web-common.css

@@ -240,7 +240,21 @@ div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arro
   margin-top: 2px;
 }
 div.hopscotch-bubble .hopscotch-bubble-close {
+  background: none;
+  color: transparent;
+  line-height: 0;
   right: 8px;
+  text-indent: inherit;
+  top: 7px;
+}
+div.hopscotch-bubble .hopscotch-bubble-close:after {
+  color: #8b8d8f;
+  content: "\e60b";
+  display: inline-block;
+  font-family: "PatternFlyIcons-webfont";
+  left: 7px;
+  line-height: 1;
+  position: absolute;
   top: 7px;
 }
 div.hopscotch-bubble .hopscotch-bubble-container {

dist/origin-web-common.js

@@ -5546,7 +5546,8 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
       showPrevButton: true,
       i18n: {
         nextBtn: 'Next >',
-        prevBtn: '< Back'
+        prevBtn: '< Back',
+        closeTooltip: 'x'  // this is the button text not a tooltip, hidden but must be 1 character for focus border (cannot but empty or null)
       }
     };
     hopscotchConfig = {};

dist/origin-web-common.min.js

@@ -2384,7 +2384,8 @@ onClose:handleTourEnd,
 showPrevButton:!0,
 i18n:{
 nextBtn:"Next >",
-prevBtn:"< Back"
+prevBtn:"< Back",
+closeTooltip:"x"
 }
 }, hopscotchConfig = {}, angular.merge(hopscotchConfig, innerConfig, tourConfig), setupSteps(), makeStepTargetVisible(0), hopscotch.startTour(hopscotchConfig, 0);
 }, cancelTour = function() {

src/styles/_guided-tour.less

@@ -97,8 +97,22 @@ div.hopscotch-bubble {
   }
 
   .hopscotch-bubble-close {
+    background: none;
+    color: transparent;
+    line-height: 0;
     right: 8px;
+    text-indent: inherit;
     top: 7px;
+    &:after {
+      color: @color-pf-black-500;
+      content: @pficon-var-close;
+      display: inline-block;
+      font-family: "PatternFlyIcons-webfont";
+      left: 7px;
+      line-height: 1;
+      position: absolute;
+      top: 7px;
+    }
   }
 
   .hopscotch-bubble-container {

src/ui-services/guidedTourService.js

@@ -18,7 +18,8 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
       showPrevButton: true,
       i18n: {
         nextBtn: 'Next >',
-        prevBtn: '< Back'
+        prevBtn: '< Back',
+        closeTooltip: 'x'  // this is the button text not a tooltip, hidden but must be 1 character for focus border (cannot but empty or null)
       }
     };
     hopscotchConfig = {};