diff --git a/docs/welcome/css/welcome.css b/docs/welcome/css/welcome.css
index 4943c0aaa..7ed321f50 100644
--- a/docs/welcome/css/welcome.css
+++ b/docs/welcome/css/welcome.css
@@ -47,7 +47,7 @@ body {
 
 .hero-outer {
   -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
   display: table;
   height: 100%;
   padding: 20px 0;
@@ -164,6 +164,10 @@ pre {
   left: calc(50% - 16px);
 }
 
+.tippy-popper[x-placement^='bottom'] .shepherd-has-title-theme .tippy-arrow {
+  border-bottom-color: #e6e6e6;
+}
+
 .tippy-popper[x-placement^='left'] {
   margin-right: 16px;
 }
@@ -185,16 +189,12 @@ pre {
   top: calc(50% - 16px);
 }
 
-.tippy-popper .shepherd-welcome:not(.shepherd-has-title) .shepherd-content header,
-.tippy-popper .shepherd-welcome:not(.shepherd-has-title) .shepherd-content .shepherd-header {
+.tippy-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content header,
+.tippy-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content .shepherd-header {
+  background: transparent;
   padding-bottom: 0;
 }
 
-.tippy-popper .shepherd-welcome .shepherd-content header,
-.tippy-popper .shepherd-welcome .shepherd-content .shepherd-header {
-  background: #ffffff;
-}
-
-.tippy-popper .shepherd-welcome .shepherd-content .shepherd-text {
+.tippy-popper .shepherd-element .shepherd-content .shepherd-text {
   color: #336457;
 }
diff --git a/docs/welcome/js/welcome.js b/docs/welcome/js/welcome.js
index f2a8f1be9..f98a52bf1 100644
--- a/docs/welcome/js/welcome.js
+++ b/docs/welcome/js/welcome.js
@@ -11,6 +11,7 @@
   function setupShepherd () {
     const shepherd = new Shepherd.Tour({
       defaultStepOptions: {
+        scrollTo: true,
         showCancelLink: true
       },
       useModalOverlay: true
diff --git a/src/js/utils.js b/src/js/utils.js
index 9eb0cf4f3..559d1211f 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -154,10 +154,17 @@ function _makeTippyInstance(attachToOptions) {
 function _makeAttachedTippyOptions(attachToOptions) {
   const resultingTippyOptions = {
     content: this.el,
-    placement: attachToOptions.on || 'right',
-    ...this.options.tippyOptions
+    flipOnUpdate: true,
+    placement: attachToOptions.on || 'right'
   };
 
+  Object.assign(resultingTippyOptions, this.options.tippyOptions);
+
+  if (this.options.title) {
+    const existingTheme = resultingTippyOptions.theme;
+    resultingTippyOptions.theme = existingTheme ? `${existingTheme} shepherd-has-title` : 'shepherd-has-title';
+  }
+
   if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {
     Object.assign(defaultPopperOptions, this.options.tippyOptions.popperOptions);
   }