diff --git a/.gitignore b/.gitignore
index 84a214785..ef0bafdb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 node_modules/
 bower_components/
 .DS_Store
+.idea
\ No newline at end of file
diff --git a/dist/css/shepherd-theme-arrows-plain-buttons.css b/dist/css/shepherd-theme-arrows-plain-buttons.css
index 8534d1dd8..5baae3df0 100644
--- a/dist/css/shepherd-theme-arrows-plain-buttons.css
+++ b/dist/css/shepherd-theme-arrows-plain-buttons.css
@@ -63,7 +63,7 @@
       border-right-color: #fff;
       border-left: 0; }
 
-.shepherd-theme-arrows-plain-buttons[x-placement^="top"].shepherd-has-title .popper__arrow {
+.shepherd-theme-arrows-plain-buttons[x-placement^="bottom"].shepherd-has-title .popper__arrow {
   border-bottom-color: #eee; }
 
 .shepherd-theme-arrows-plain-buttons.shepherd-has-title .shepherd-content header {
diff --git a/dist/css/shepherd-theme-arrows.css b/dist/css/shepherd-theme-arrows.css
index c50a4d6d4..c082f1790 100644
--- a/dist/css/shepherd-theme-arrows.css
+++ b/dist/css/shepherd-theme-arrows.css
@@ -63,7 +63,7 @@
       border-right-color: #fff;
       border-left: 0; }
 
-.shepherd-theme-arrows[x-placement^="top"].shepherd-has-title .popper__arrow {
+.shepherd-theme-arrows[x-placement^="bottom"].shepherd-has-title .popper__arrow {
   border-bottom-color: #eee; }
 
 .shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
diff --git a/dist/css/shepherd-theme-dark.css b/dist/css/shepherd-theme-dark.css
index 7303b8704..34f8c246c 100644
--- a/dist/css/shepherd-theme-dark.css
+++ b/dist/css/shepherd-theme-dark.css
@@ -63,7 +63,7 @@
   z-index: 9999;
   max-width: 24em;
   font-size: 1em; }
-  .shepherd-theme-dark[x-placement^="top"].shepherd-has-title .popper__arrow {
+  .shepherd-theme-dark[x-placement^="bottom"].shepherd-has-title .popper__arrow {
     border-bottom-color: #303030; }
   .shepherd-theme-dark.shepherd-has-title .shepherd-content header {
     background: #303030;
diff --git a/dist/css/shepherd-theme-default.css b/dist/css/shepherd-theme-default.css
index 0b1702693..de3917f46 100644
--- a/dist/css/shepherd-theme-default.css
+++ b/dist/css/shepherd-theme-default.css
@@ -63,7 +63,7 @@
   z-index: 9999;
   max-width: 24em;
   font-size: 1em; }
-  .shepherd-theme-default[x-placement^="top"].shepherd-has-title .popper__arrow {
+  .shepherd-theme-default[x-placement^="bottom"].shepherd-has-title .popper__arrow {
     border-bottom-color: #e6e6e6; }
   .shepherd-theme-default.shepherd-has-title .shepherd-content header {
     background: #e6e6e6;
diff --git a/dist/css/shepherd-theme-square-dark.css b/dist/css/shepherd-theme-square-dark.css
index 0bc49dd61..7cb683fd6 100644
--- a/dist/css/shepherd-theme-square-dark.css
+++ b/dist/css/shepherd-theme-square-dark.css
@@ -64,7 +64,7 @@
   z-index: 9999;
   max-width: 24em;
   font-size: 1em; }
-  .shepherd-theme-square-dark[x-placement^="top"].shepherd-has-title .popper__arrow {
+  .shepherd-theme-square-dark[x-placement^="bottom"].shepherd-has-title .popper__arrow {
     border-bottom-color: #303030; }
   .shepherd-theme-square-dark.shepherd-has-title .shepherd-content header {
     background: #303030;
diff --git a/dist/css/shepherd-theme-square.css b/dist/css/shepherd-theme-square.css
index 3fd52770b..5dd71cd85 100644
--- a/dist/css/shepherd-theme-square.css
+++ b/dist/css/shepherd-theme-square.css
@@ -64,7 +64,7 @@
   z-index: 9999;
   max-width: 24em;
   font-size: 1em; }
-  .shepherd-theme-square[x-placement^="top"].shepherd-has-title .popper__arrow {
+  .shepherd-theme-square[x-placement^="bottom"].shepherd-has-title .popper__arrow {
     border-bottom-color: #e6e6e6; }
   .shepherd-theme-square.shepherd-has-title .shepherd-content header {
     background: #e6e6e6;
diff --git a/src/css/shepherd-theme-arrows-plain-buttons.sass b/src/css/shepherd-theme-arrows-plain-buttons.sass
index 94fb2a37a..ba9659ea4 100644
--- a/src/css/shepherd-theme-arrows-plain-buttons.sass
+++ b/src/css/shepherd-theme-arrows-plain-buttons.sass
@@ -22,7 +22,7 @@ $headerBackgroundColor: #eee
 
     // Make the arrow 5color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor
diff --git a/src/css/shepherd-theme-arrows.sass b/src/css/shepherd-theme-arrows.sass
index 38c5f5008..891fab111 100644
--- a/src/css/shepherd-theme-arrows.sass
+++ b/src/css/shepherd-theme-arrows.sass
@@ -21,7 +21,7 @@ $headerBackgroundColor: #eee
 
     // Make the arrow color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor
diff --git a/src/css/shepherd-theme-dark.sass b/src/css/shepherd-theme-dark.sass
index b8f6fbeeb..2d9e9145d 100644
--- a/src/css/shepherd-theme-dark.sass
+++ b/src/css/shepherd-theme-dark.sass
@@ -27,7 +27,7 @@ $maxWidth: 24em
 
     // Make the arrow 5color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor
diff --git a/src/css/shepherd-theme-default.sass b/src/css/shepherd-theme-default.sass
index 157cc1dea..7c5058321 100644
--- a/src/css/shepherd-theme-default.sass
+++ b/src/css/shepherd-theme-default.sass
@@ -27,7 +27,7 @@ $maxWidth: 24em
 
     // Make the arrow 5color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor
diff --git a/src/css/shepherd-theme-square-dark.sass b/src/css/shepherd-theme-square-dark.sass
index 5df106a3f..75526e73d 100644
--- a/src/css/shepherd-theme-square-dark.sass
+++ b/src/css/shepherd-theme-square-dark.sass
@@ -28,7 +28,7 @@ $maxWidth: 24em
 
     // Make the arrow 5color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor
diff --git a/src/css/shepherd-theme-square.sass b/src/css/shepherd-theme-square.sass
index e352abd9e..da8c09f75 100644
--- a/src/css/shepherd-theme-square.sass
+++ b/src/css/shepherd-theme-square.sass
@@ -28,7 +28,7 @@ $maxWidth: 24em
 
     // Make the arrow 5color the same as the header color when the arrow is on the top
 
-    &[x-placement^="top"]
+    &[x-placement^="bottom"]
         &.#{ $themePrefix }-has-title
             .popper__arrow
                 border-bottom-color: $headerBackgroundColor