diff --git a/docs/examples/tour/basic.vue b/docs/examples/tour/basic.vue
index 8d2e79382d..b001a4c5a7 100644
--- a/docs/examples/tour/basic.vue
+++ b/docs/examples/tour/basic.vue
@@ -4,14 +4,15 @@
   <el-divider />
 
   <el-space>
-    <el-button ref="ref1">upload</el-button>
-    <el-button ref="ref2" type="primary">save</el-button>
+    <el-button ref="ref1">Upload</el-button>
+    <el-button ref="ref2" type="primary">Save</el-button>
     <el-button ref="ref3" :icon="MoreFilled" />
   </el-space>
 
   <el-tour v-model="open">
     <el-tour-step :target="ref1?.$el" title="Upload File">
       <img
+        style="width: 240px"
         src="https://element-plus.org/images/element-plus-logo.svg"
         alt="tour.png"
       />
diff --git a/docs/examples/tour/indicator.vue b/docs/examples/tour/indicator.vue
index c9810b5e78..5b6fc64e18 100644
--- a/docs/examples/tour/indicator.vue
+++ b/docs/examples/tour/indicator.vue
@@ -4,8 +4,8 @@
   <el-divider />
 
   <el-space>
-    <el-button ref="ref1">upload</el-button>
-    <el-button ref="ref2" type="primary">save</el-button>
+    <el-button ref="ref1">Upload</el-button>
+    <el-button ref="ref2" type="primary">Save</el-button>
     <el-button ref="ref3" :icon="MoreFilled" />
   </el-space>
 
diff --git a/docs/examples/tour/mask.vue b/docs/examples/tour/mask.vue
index c9aded87e2..6fd648b7df 100644
--- a/docs/examples/tour/mask.vue
+++ b/docs/examples/tour/mask.vue
@@ -4,8 +4,8 @@
   <el-divider />
 
   <el-space>
-    <el-button ref="ref1">upload</el-button>
-    <el-button ref="ref2" type="primary">save</el-button>
+    <el-button ref="ref1">Upload</el-button>
+    <el-button ref="ref2" type="primary">Save</el-button>
     <el-button ref="ref3" :icon="MoreFilled" />
   </el-space>
 
diff --git a/docs/examples/tour/non-modal.vue b/docs/examples/tour/non-modal.vue
index 402d2fe031..33c466191d 100644
--- a/docs/examples/tour/non-modal.vue
+++ b/docs/examples/tour/non-modal.vue
@@ -4,8 +4,8 @@
   <el-divider />
 
   <el-space>
-    <el-button ref="ref1">upload</el-button>
-    <el-button ref="ref2" type="primary">save</el-button>
+    <el-button ref="ref1">Upload</el-button>
+    <el-button ref="ref2" type="primary">Save</el-button>
     <el-button ref="ref3" :icon="MoreFilled" />
   </el-space>
 
diff --git a/docs/examples/tour/target.vue b/docs/examples/tour/target.vue
index 402c7b3013..9c83074729 100644
--- a/docs/examples/tour/target.vue
+++ b/docs/examples/tour/target.vue
@@ -4,8 +4,8 @@
   <el-divider />
 
   <el-space>
-    <el-button id="btn1">upload</el-button>
-    <el-button id="btn2" type="primary">save</el-button>
+    <el-button id="btn1">Upload</el-button>
+    <el-button id="btn2" type="primary">Save</el-button>
     <el-button ref="btnRef" :icon="MoreFilled" />
   </el-space>
 
diff --git a/packages/components/tour/src/step.vue b/packages/components/tour/src/step.vue
index e7fd7fba66..ab1f0b42b7 100644
--- a/packages/components/tour/src/step.vue
+++ b/packages/components/tour/src/step.vue
@@ -10,7 +10,7 @@
       <component :is="mergedCloseIcon" />
     </el-icon>
   </button>
-  <header :class="ns.e('header')">
+  <header :class="[ns.e('header'), { 'show-close': showClose }]">
     <slot name="header">
       <span role="heading" :class="ns.e('title')">
         {{ title }}
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index 09f37c8c9c..a410b2a25f 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -800,16 +800,16 @@ $tour: () !default;
 $tour: map.merge(
   (
     'width': 520px,
-    'padding-primary': 16px,
+    'padding-primary': 12px,
     'font-line-height': getCssVar('font-line-height-primary'),
     'title-font-size': 16px,
     'title-text-color': getCssVar('text-color-primary'),
     'title-font-weight': 400,
+    'close-color': getCssVar('color-info'),
     'font-size': 14px,
     'color': getCssVar('text-color-primary'),
     'bg-color': getCssVar('bg-color'),
     'border-radius': 4px,
-    'border-color': getCssVar('border-color-lighter'),
   ),
   $tour
 );
diff --git a/packages/theme-chalk/src/tour.scss b/packages/theme-chalk/src/tour.scss
index f18632a338..8ec13ecea2 100644
--- a/packages/theme-chalk/src/tour.scss
+++ b/packages/theme-chalk/src/tour.scss
@@ -12,13 +12,13 @@
   }
 
   @include e(content) {
-    padding: 0;
     border-radius: getCssVar('tour-border-radius');
-    border: 1px solid getCssVar('tour-border-color');
     width: var(#{getCssVarName('tour-width')});
+    padding: getCssVar('tour-padding-primary');
     background: getCssVar('tour-bg-color');
     box-shadow: getCssVar('box-shadow-light');
     box-sizing: border-box;
+    overflow-wrap: break-word;
 
     $content-selector: &;
 
@@ -32,7 +32,6 @@
     @include e(arrow) {
       position: absolute;
       background: getCssVar('tour-bg-color');
-      border: 1px solid getCssVar('tour-border-color');
       width: 10px;
       height: 10px;
       pointer-events: none;
@@ -63,11 +62,11 @@
 
     @include e(closebtn) {
       position: absolute;
-      top: 6px;
+      top: 0;
       right: 0;
       padding: 0;
-      width: 44px;
-      height: 44px;
+      width: 40px;
+      height: 40px;
       background: transparent;
       border: none;
       outline: none;
@@ -78,7 +77,7 @@
       );
 
       .#{$namespace}-tour__close {
-        color: getCssVar('tour-title-text-color');
+        color: getCssVar('tour-close-color');
         font-size: inherit;
       }
 
@@ -91,9 +90,14 @@
     }
 
     @include e(header) {
-      padding: getCssVar('tour', 'padding-primary');
-      padding-bottom: 10px;
-      margin-right: 16px;
+      padding-bottom: getCssVar('tour-padding-primary');
+
+      &.show-close {
+        padding-right: calc(getCssVar('tour-padding-primary') + var(
+                #{getCssVarName('message-close-size')},
+                map.get($message, 'close-size')
+        ));
+      }
     }
 
     @include e(title) {
@@ -104,7 +108,6 @@
     }
 
     @include e(body) {
-      padding: 0 getCssVar('tour-padding-primary');
       color: getCssVar('tour-text-color');
       font-size: getCssVar('tour-font-size');
       img,
@@ -114,8 +117,7 @@
     }
 
     @include e(footer) {
-      padding: getCssVar('tour-padding-primary');
-      padding-top: 10px;
+      padding-top: getCssVar('tour-padding-primary');
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
@@ -144,6 +146,7 @@
     @include set-css-var-value('tour-title-text-color', #fff);
     @include set-css-var-value('tour-text-color', #fff);
     @include set-css-var-value('tour-bg-color', getCssVar('color', 'primary'));
+    @include set-css-var-value('tour-close-color', #fff);
 
     .#{$namespace}-tour__closebtn {
       &:focus,