diff --git a/packages/react/src/views/Message/MessageToolbox.js b/packages/react/src/views/Message/MessageToolbox.js
index 34752872eb..4470dce7e6 100644
--- a/packages/react/src/views/Message/MessageToolbox.js
+++ b/packages/react/src/views/Message/MessageToolbox.js
@@ -229,9 +229,6 @@ export const MessageToolbox = ({
           style={styleOverrides}
           {...props}
         >
-          {surfaceOptions?.length > 0 && (
-            <SurfaceMenu options={surfaceOptions} size="small" />
-          )}
           {menuOptions?.length > 0 && (
             <Menu
               size="small"
@@ -241,6 +238,15 @@ export const MessageToolbox = ({
               style={{ top: 'auto', bottom: `calc(100% + 2px)` }}
             />
           )}
+          {surfaceOptions?.length > 0 && (
+            <SurfaceMenu
+              options={surfaceOptions.map(option => ({
+                ...option,
+                tooltipPosition: 'top'
+              }))}
+              size="small"
+            />
+          )}
 
           {isEmojiOpen && (
             <EmojiPicker
diff --git a/packages/react/src/views/SurfaceMenu/SurfaceItem.js b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
index 9674ead1cf..b060883402 100644
--- a/packages/react/src/views/SurfaceMenu/SurfaceItem.js
+++ b/packages/react/src/views/SurfaceMenu/SurfaceItem.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { Tooltip, ActionButton } from '@embeddedchat/ui-elements';
 
 const SurfaceItem = ({ item, size }) => (
-  <Tooltip text={item.label} position="bottom" key={item.id}>
+  <Tooltip text={item.label} position={item.tooltipPosition || 'bottom'} key={item.id}>
     <ActionButton
       square
       ghost