diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 8f39946c128d445c5dbd98acbade5ac10553f1c2..682c3b2423a9fc2d846e693056a4bf6e8b4b9179 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -1,4 +1,5 @@
 @import "../../css/colors.css";
+@import "../../css/z-index.css";
 
 $main-button-size: 2.75rem;
 $more-button-size: 2.25rem;
@@ -44,7 +45,7 @@ button::-moz-focus-inner {
     width: $main-button-size;
     height: $main-button-size;
     box-shadow: 0 0 0 4px $motion-transparent;
-    z-index: 20; /* TODO reorder layout to prevent z-index need */
+    z-index: $z-index-add-button;
     transition: transform, box-shadow 0.5s;
 }
 
@@ -71,6 +72,7 @@ button::-moz-focus-inner {
     border-top-right-radius: $more-button-size;
     width: $more-button-size;
     margin-left: calc(($main-button-size - $more-button-size) / 2);
+    margin-right: calc(($main-button-size - $more-button-size) / 2);
 
     position: absolute;
     bottom: calc($main-button-size);
@@ -150,7 +152,7 @@ button::-moz-focus-inner {
     border-radius: .25rem !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-    z-index: 100 !important;
+    z-index: $z-index-tooltip !important;
 }
 
 $arrow-size: 0.5rem;
diff --git a/src/components/action-menu/action-menu.jsx b/src/components/action-menu/action-menu.jsx
index 2725c502b421007f85c7ec4d8621ff213f35b162..781549d3d918abce3c58a6ff91b878ce03766378 100644
--- a/src/components/action-menu/action-menu.jsx
+++ b/src/components/action-menu/action-menu.jsx
@@ -142,7 +142,7 @@ class ActionMenu extends React.Component {
                             fileAccept, fileChange, fileInput}, keyId) => {
                             const isComingSoon = !handleClick;
                             const hasFileInput = fileInput;
-                            const tooltipId = title;
+                            const tooltipId = `${mainTooltipId}-${title}`;
                             return (
                                 <div key={`${tooltipId}-${keyId}`}>
                                     <button
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 132f7d71dd68ec3883f9e2d6dafc2b8679148c21..535c38b0be684e8ac55d3cec8446cf758cd00833 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -32,6 +32,7 @@ $fade-out-distance: 100px;
     position: absolute;
     bottom: 0;
     left: 0;
+    right:0;
     background: linear-gradient(rgba(232,237,241, 0),rgba(232,237,241, 1));
     height: $fade-out-distance;
     width: 100%;
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index bdd7f87eb4f031a9155aec4a0fd3f6affda1ad0d..091d2dd344c4bba864447041cd0c08b5ee07f5d6 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -16,7 +16,7 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     font-size: 1rem !important;
     line-height: 1.25rem !important;
-    z-index: $z-index-coming-soon !important;
+    z-index: $z-index-tooltip !important;
 }
 
 .coming-soon:after {
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 70895211757bba3a752569a9969aaf21c783cc8e..da89efab0433d86fe091e452f56c06f3fb496e9e 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -68,8 +68,14 @@
 .add-button {
     position: absolute;
     bottom: 0.75rem;
+}
+
+[dir="ltr"] .add-button {
     right: 1rem;
-    z-index: $z-index-add-button;
+}
+
+[dir="rtl"] .add-button {
+    left: 1rem;
 }
 
 .raised {
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index a168759901196783d90a0714fbb578941e028d9d..9bb846b1ef0db8e705537b32c22e84ed87e2e2c0 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -96,7 +96,6 @@ $header-height: calc($stage-menu-height - 2px);
 .add-button {
     position: absolute;
     bottom: 0.75rem;
-    z-index: $z-index-add-button
 }
 
 .raised, .raised .header {
diff --git a/src/css/z-index.css b/src/css/z-index.css
index b3368fc2bd638ef4763bf495171b41a7f41d7c53..26893f08fa5147930328992359d709777bef0ec7 100644
--- a/src/css/z-index.css
+++ b/src/css/z-index.css
@@ -8,8 +8,8 @@ $z-index-extension-button: 50; /* Force extension button above the ScratchBlocks
 $z-index-menu-bar: 50; /* blocklyToolboxDiv is 40 */
 
 $z-index-monitor: 100;
-$z-index-coming-soon: 110;
 $z-index-add-button: 120;
+$z-index-tooltip: 130; /* tooltips should go over add buttons if they overlap */
 
 $z-index-card: 490;
 $z-index-loader: 500;