diff --git a/packages/scratch-gui/src/components/feature-callout-popover/feature-callout-popover.css b/packages/scratch-gui/src/components/feature-callout-popover/feature-callout-popover.css
index cbe7fc2697b..d6b78289d52 100644
--- a/packages/scratch-gui/src/components/feature-callout-popover/feature-callout-popover.css
+++ b/packages/scratch-gui/src/components/feature-callout-popover/feature-callout-popover.css
@@ -37,6 +37,7 @@
 
 .modal-overlay {
     position: fixed;
+    z-index: $z-index-tooltip-overlay;
     top: 0;
     left: 0;
     right: 0;
@@ -54,7 +55,7 @@
     padding: 0;
     margin: 0;
     position: fixed;
-    z-index: $z-index-modal;
+    z-index: $z-index-tooltip;
     pointer-events: auto;
 }
 
@@ -64,3 +65,7 @@
     outline: none; 
 }
 
+.arrow {
+    z-index: $z-index-tooltip !important; /* otherwise it gets overridden in modal-with-arrow */
+}
+
diff --git a/packages/scratch-gui/src/components/modal-with-arrow/modal-with-arrow.jsx b/packages/scratch-gui/src/components/modal-with-arrow/modal-with-arrow.jsx
index 4d892c10383..802f5c90ce2 100644
--- a/packages/scratch-gui/src/components/modal-with-arrow/modal-with-arrow.jsx
+++ b/packages/scratch-gui/src/components/modal-with-arrow/modal-with-arrow.jsx
@@ -14,6 +14,7 @@ const ModalWithArrow = ({
     align,
     layoutConfig,
     arrowConfig,
+    arrowStyle,
     modalContentStyle,
     modalOverlayStyle,
     title,
@@ -114,7 +115,7 @@ const ModalWithArrow = ({
                     src={arrowIcon}
                     alt=""
                     aria-hidden="true"
-                    className={styles.arrow}
+                    className={classNames(styles.arrow, arrowStyle)}
                     style={{
                         top: pos.arrowTop,
                         left: pos.arrowLeft,
@@ -149,6 +150,7 @@ ModalWithArrow.propTypes = {
         arrowRightIcon: PropTypes.string
     }).isRequired,
     children: PropTypes.node.isRequired,
+    arrowStyle: PropTypes.string,
     modalContentStyle: PropTypes.string,
     modalOverlayStyle: PropTypes.string,
     title: PropTypes.string
diff --git a/packages/scratch-gui/src/css/z-index.css b/packages/scratch-gui/src/css/z-index.css
index 68bc88d310d..84814e81b16 100644
--- a/packages/scratch-gui/src/css/z-index.css
+++ b/packages/scratch-gui/src/css/z-index.css
@@ -13,8 +13,10 @@ $z-index-monitor: 48; /* monitors go over add buttons */
 $z-index-stage-question: 49; /* "ask" block text input goes above monitors */
 
 $z-index-card: 480;
+$z-index-tooltip-overlay: 481;
+$z-index-tooltip: 490;
 $z-index-alerts: 490;
-$z-index-menu-bar: 491; /* menu-bar should go over monitors, alerts and tutorials */
+$z-index-menu-bar: 491; /* menu-bar should go over monitors, alerts, tooltips and tutorials */
 $z-index-loader: 500;
 $z-index-modal-overlay: 501;
 $z-index-modal: 510;