diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c7c96ce11..44c2634d06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js
index 867033e403..2a6abe3c05 100644
--- a/assets/js/theme/common/carousel/index.js
+++ b/assets/js/theme/common/carousel/index.js
@@ -2,6 +2,7 @@ import 'slick-carousel';
 
 import {
     dotsSetup,
+    tooltipSetup,
     setTabindexes,
     arrowAriaLabling,
     heroCarouselSetup,
@@ -33,6 +34,7 @@ const onCarouselChange = (event, carousel) => {
     dotsSetup($dots, actualSlide, actualSlideCount, $slider.data('dots-labels'));
     setTabindexes($slider.find('.slick-slide'), $prevArrow, $nextArrow, actualSlide, actualSlideCount);
     arrowAriaLabling($prevArrow, $nextArrow, actualSlide, actualSlideCount);
+    tooltipSetup($prevArrow, $nextArrow, $dots);
 };
 
 export default function () {
diff --git a/assets/js/theme/common/carousel/utils/index.js b/assets/js/theme/common/carousel/utils/index.js
index 97ab738300..3227c05446 100644
--- a/assets/js/theme/common/carousel/utils/index.js
+++ b/assets/js/theme/common/carousel/utils/index.js
@@ -3,3 +3,4 @@ export { default as arrowAriaLabling } from './arrowAriaLabling';
 export { default as dotsSetup } from './dotsSetup';
 export { default as getRealSlidesQuantityAndCurrentSlide } from './getRealSlidesQuantityAndCurrentSlide';
 export { default as setTabindexes } from './setTabindexes';
+export { default as tooltipSetup } from './tooltipSetup';
diff --git a/assets/js/theme/common/carousel/utils/tooltipSetup.js b/assets/js/theme/common/carousel/utils/tooltipSetup.js
new file mode 100644
index 0000000000..e6d8695151
--- /dev/null
+++ b/assets/js/theme/common/carousel/utils/tooltipSetup.js
@@ -0,0 +1,30 @@
+const carouselTooltipClass = 'carousel-tooltip';
+const carouselTooltip = `<span class="${carouselTooltipClass}"></span>`;
+
+const setupTooltipAriaLabel = ($node) => {
+    const $existedTooltip = $node.find(`.${carouselTooltipClass}`);
+
+    if ($existedTooltip.length) {
+        $existedTooltip.attr('aria-label', $node.attr('aria-label'));
+    } else {
+        const $tooltip = $(carouselTooltip).attr('aria-label', $node.attr('aria-label'));
+        $node.append($tooltip);
+    }
+};
+
+const arrows = (...arrowNodes) => {
+    arrowNodes.forEach($arrow => setupTooltipAriaLabel($arrow));
+};
+
+const dots = ($dots) => {
+    $dots.children().each((idx, dot) => setupTooltipAriaLabel($(dot).find('button')));
+};
+
+export default ($prevArrow, $nextArrow, $dots) => {
+    if ($prevArrow.length && $nextArrow.length) {
+        arrows($prevArrow, $nextArrow);
+    }
+    if ($dots) {
+        dots($dots);
+    }
+};
diff --git a/assets/scss/common/_focus-tooltip.scss b/assets/scss/common/_focus-tooltip.scss
new file mode 100644
index 0000000000..9d1bd3ccbf
--- /dev/null
+++ b/assets/scss/common/_focus-tooltip.scss
@@ -0,0 +1,37 @@
+@mixin addFocusTooltip ($attr: title) {
+        &:before {
+            content: " ";
+            position: absolute;
+            right: 0;
+            top: 50%;
+            border-width: remCalc(10px);
+            border-style: solid;
+            border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent;
+        }
+
+        &:after {
+            content: attr($attr);
+            padding: remCalc(4px) remCalc(6px);
+            background-color: $adminBar-tooltip-bg-backgroundColor;
+            color: white;
+            position: absolute;
+            font-size: 1rem;
+            white-space: nowrap;
+            right: 0;
+            top: 100%;
+            cursor: default;
+            border-radius: remCalc(8px);
+        }
+
+        &:before,
+        &:after {
+            display: none;
+        }
+
+        &:focus {
+            &:before,
+            &:after {
+                display: block;
+            }
+        }
+}
diff --git a/assets/scss/common/index.scss b/assets/scss/common/index.scss
index 5099662fb5..d4740fed51 100644
--- a/assets/scss/common/index.scss
+++ b/assets/scss/common/index.scss
@@ -1 +1,2 @@
 @import 'aria';
+@import 'focus-tooltip';
diff --git a/assets/scss/components/foundation/modal/_modal.scss b/assets/scss/components/foundation/modal/_modal.scss
index bcc2f893ee..042c5fca44 100644
--- a/assets/scss/components/foundation/modal/_modal.scss
+++ b/assets/scss/components/foundation/modal/_modal.scss
@@ -4,34 +4,6 @@
 // // 1. Fix for content shifted to top in modal window when bottom variant option selected
 // =============================================================================
 
-@mixin addFocusTooltip () {
-    &:focus {
-        &:before {
-            content: " ";
-            position: absolute;
-            right: 0;
-            top: 50%;
-            border-width: remCalc(10px);
-            border-style: solid;
-            border-color: transparent transparent $adminBar-tooltip-bg-backgroundColor transparent;
-        }
-
-        &:after {
-            content: attr(title);
-            padding: remCalc(4px) remCalc(6px);
-            background-color: $adminBar-tooltip-bg-backgroundColor;
-            color: white;
-            position: absolute;
-            font-size: 1rem;
-            white-space: nowrap;
-            right: 0;
-            top: 100%;
-            cursor: default;
-            border-radius: remCalc(8px);
-        }
-    }
-}
-
 .modal {
     margin: 0;
     max-height: 90%;
diff --git a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
index afddcea623..352d314ecb 100644
--- a/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
+++ b/assets/scss/components/stencil/heroCarousel/_heroCarousel.scss
@@ -18,7 +18,6 @@
     min-width: 100%;
     margin-bottom: (spacing("double") + spacing("single"));
     margin-top: -(spacing("single")); // 3
-    overflow: hidden;
     opacity: 0;
 
     &.is-visible {
@@ -84,6 +83,13 @@
             @include carouselOpaqueBackgrounds($slick-dot-bgColor);
         }
     }
+
+    @media (max-width: 550px) and (max-height: 550px) {
+        .heroCarousel-content {
+            display: none;
+        }
+    }
+
 }
 
 .heroCarousel-slide {
@@ -131,6 +137,7 @@
         justify-content: center;
         align-items: flex-start;
         height: 56.25vw;
+        max-height: 100vh;
 
         @include breakpoint("small") {
             max-height: remCalc(400px);
@@ -141,25 +148,31 @@
         }
     }
 
-    &.is-square-image-type {
-        
+    &.is-square-image-type,
+    &.is-vertical-image-type {
         .heroCarousel-image-wrapper {
-            height: 100vw;
-        
+            max-height: 100vh;
+
             @include breakpoint("small") {
                 height: 56.25vw;
-            }    
+                max-height: remCalc(400px);
+            }
+
+            @include breakpoint("medium") {
+                max-height: remCalc(600px);
+            }
+        }
+    }
+
+    &.is-square-image-type {
+        .heroCarousel-image-wrapper {
+            height: 100vw;
         }
     }
 
     &.is-vertical-image-type {
-        
         .heroCarousel-image-wrapper {
             height: 110vw;
-        
-            @include breakpoint("small") {
-                height: 56.25vw;
-            }    
         }
     }
 }
diff --git a/assets/scss/components/vendor/slick/_slick.scss b/assets/scss/components/vendor/slick/_slick.scss
index 44b5f6028b..2de727695c 100644
--- a/assets/scss/components/vendor/slick/_slick.scss
+++ b/assets/scss/components/vendor/slick/_slick.scss
@@ -64,7 +64,7 @@
 }
 
 .slick-prev {
-    left: -15px;
+    left: -10px;
 
     @include breakpoint("large") {
         left: -(spacing("double") + spacing("quarter"));
@@ -180,3 +180,68 @@ div.slick-slider {
     *width: 100%;
 }
 
+
+
+//
+// Carousel tooltips for buttons and bullets
+// -----------------------------------------------------------------------------
+
+.carousel-tooltip {
+    height: 1px;
+    display: block;
+    position: relative;
+    margin-top: 10px;
+    @include addFocusTooltip($attr: aria-label);
+    
+    &:after {
+        padding: 15px 10px;
+        top: 10px;
+    }
+
+    .slick-prev:focus &,
+    .slick-next:focus &,
+    .slick-dots button:focus & {
+        &:before,
+        &:after {
+            display: block;
+        }
+    }
+
+    .slick-prev &,
+    .slick-next & {
+        &:before {
+            top: -7px;
+        }
+    }
+
+    .slick-prev & {
+        &:before {
+            right: -2px;
+        }
+
+        &:after {
+            right: auto;
+            left: -5px;
+        }
+    }
+
+    .slick-next & {
+        &:after {
+            right: -5px;
+        }
+    }
+
+    .slick-dots button & {
+        margin-top: 25px;
+
+        &:before,
+        &:after {
+            right: 50%;
+            transform: translateX(50%);        
+        }
+
+        &:before {
+            top: -7px;
+        }
+    }
+}
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
index 499c2f439d..870e23f646 100644
--- a/assets/scss/theme.scss
+++ b/assets/scss/theme.scss
@@ -23,6 +23,7 @@
 // 4. Import Stencil's component settings overrides.
 // 5. Import tools which set/reset Citadel's global settings, to be consumed by
 //    the rest of Stencil.
+// 6. Common aria helpers
 //
 // -----------------------------------------------------------------------------
 
@@ -68,10 +69,10 @@
 //
 // -----------------------------------------------------------------------------
 
+@import "common/index"; // 6
 @import "../../node_modules/@bigcommerce/citadel/dist/vendor/normalize/normalize"; // 1
 @import "../../node_modules/@bigcommerce/citadel/dist/components/components"; // 2
 @import "components/components"; // 3
-@import "common/index";
 
 
 // Layouts