Fix livedock tooltips (#4915)

stream-labs · Mar 25, 2024 · 209aeed · 209aeed
1 parent a17703f
commit 209aeed
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/app/components-react/root/LiveDock.tsx b/app/components-react/root/LiveDock.tsx
@@ -382,17 +382,29 @@ function LiveDock(p: { onLeft: boolean }) {
             <div className={styles.liveDockInfo}>
               <div className={styles.liveDockPlatformTools}>
                 {ctrl.canEditChannelInfo && (
-                  <Tooltip title={$t('Edit your stream title and description')} placement="right">
+                  <Tooltip
+                    title={$t('Edit your stream title and description')}
+                    placement="right"
+                    autoAdjustOverflow={false}
+                  >
                     <i onClick={() => ctrl.showEditStreamInfo()} className="icon-edit" />
                   </Tooltip>
                 )}
                 {isPlatform(['youtube', 'facebook', 'trovo', 'tiktok']) && isStreaming && (
-                  <Tooltip title={$t('View your live stream in a web browser')} placement="right">
+                  <Tooltip
+                    title={$t('View your live stream in a web browser')}
+                    placement="right"
+                    autoAdjustOverflow={false}
+                  >
                     <i onClick={() => ctrl.openPlatformStream()} className="icon-studio" />
                   </Tooltip>
                 )}
                 {isPlatform(['youtube', 'facebook', 'tiktok']) && isStreaming && (
-                  <Tooltip title={$t('Go to Live Dashboard')} placement="right">
+                  <Tooltip
+                    title={$t('Go to Live Dashboard')}
+                    placement="right"
+                    autoAdjustOverflow={false}
+                  >
                     <i onClick={() => ctrl.openPlatformDash()} className="icon-settings" />
                   </Tooltip>
                 )}

diff --git a/app/components-react/shared/Tooltip.tsx b/app/components-react/shared/Tooltip.tsx
@@ -27,6 +27,7 @@ interface ITooltipTipProps {
   placement?: TTipPosition;
   content?: HTMLElement | boolean;
   disabled?: boolean;
+  autoAdjustOverflow?: boolean;
 }
 
 export default function Tooltip(props: PropsWithChildren<ITooltipTipProps>) {
@@ -40,6 +41,7 @@ export default function Tooltip(props: PropsWithChildren<ITooltipTipProps>) {
     placement = 'bottom',
     content,
     disabled = false,
+    autoAdjustOverflow = true,
   } = props;
 
   return (
@@ -62,6 +64,7 @@ export default function Tooltip(props: PropsWithChildren<ITooltipTipProps>) {
           getPopupContainer={triggerNode => triggerNode}
           mouseLeaveDelay={0.1}
           trigger={['hover', 'focus', 'click']}
+          autoAdjustOverflow={autoAdjustOverflow}
         >
           {content}
           {{ ...props }.children}