diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png
index 2b2da82cf..d3b72914f 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Draft-segments-should-look-right-2-Google-Chrome-linux.png differ
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index e6e680721..6bc8a2536 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -210,6 +210,7 @@ export function Toolbar({
                 <ToolbarItemTooltip
                   itemConfig={maybeIconConfig[0]}
                   configCallbackProps={configCallbackProps}
+                  className="ui-open:!hidden"
                 />
               </ActionButtonDropdown>
             )
@@ -277,9 +278,11 @@ export function Toolbar({
 const ToolbarItemTooltip = memo(function ToolbarItemContents({
   itemConfig,
   configCallbackProps,
+  className,
 }: {
   itemConfig: ToolbarItemResolved
   configCallbackProps: ToolbarItemCallbackProps
+  className?: string
 }) {
   const { state } = useModelingContext()
 
@@ -305,8 +308,9 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
           ? ({ '-webkit-app-region': 'no-drag' } as React.CSSProperties)
           : {}
       }
+      hoverOnly
       position="bottom"
-      wrapperClassName="!p-4 !pointer-events-auto"
+      wrapperClassName={'!p-4 !pointer-events-auto ' + className}
       contentClassName="!text-left text-wrap !text-xs !p-0 !pb-2 flex gap-2 !max-w-none !w-72 flex-col items-stretch"
     >
       <div className="rounded-top flex items-center gap-2 pt-3 pb-2 px-2 bg-chalkboard-20/50 dark:bg-chalkboard-80/50">