From 24576ecd28435827a403cd94b311ab9aa15fa4aa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 25 Jul 2026 09:04:28 +0000
Subject: [PATCH] Suppress toolbar tooltips while a fan-out or folder is
 expanded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a `disabled` prop to the shared `Tooltip` that suppresses the hover
bubble, and pass `disabled={isExpanded}` from `ToolbarFanOutItem` and
`ToolbarFolder`. When a sub menu or fan-out panel is open, the trigger
button is still hovered, so its CSS hover tooltip stayed visible and
overlapped the revealed panel — making it hard to see. The tooltip now
disappears while the panel is expanded and returns once it closes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GorDfFeCPRaaeSPzHCKJKQ
---
 Source/Common/Tooltip.tsx                     | 28 ++++++++++++-------
 .../when_rendered/and_it_is_disabled.ts       | 24 ++++++++++++++++
 .../when_rendered/and_it_is_not_disabled.ts   | 24 ++++++++++++++++
 Source/Toolbar/ToolbarFanOutItem.tsx          |  2 +-
 Source/Toolbar/ToolbarFolder.tsx              |  2 +-
 5 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 Source/Common/for_Tooltip/when_rendered/and_it_is_disabled.ts
 create mode 100644 Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts

diff --git a/Source/Common/Tooltip.tsx b/Source/Common/Tooltip.tsx
index 3bfa617..ec3a1da 100644
--- a/Source/Common/Tooltip.tsx
+++ b/Source/Common/Tooltip.tsx
@@ -13,6 +13,12 @@ export interface TooltipProps {
     content: string;
     /** Where the tooltip appears relative to the trigger (default: 'top'). */
     position?: TooltipPosition;
+    /**
+     * When true, the tooltip is suppressed and never appears on hover (default: false).
+     * Useful when the trigger has expanded into a submenu/fan-out panel and the hover
+     * label would otherwise overlap the revealed content.
+     */
+    disabled?: boolean;
     /** The element that triggers the tooltip on hover. */
     children: React.ReactNode;
 }
@@ -28,17 +34,19 @@ const POSITION_CLASSES: Record<TooltipPosition, string> = {
  * A CSS-only hover tooltip wrapper. Wraps any child element and displays
  * a styled floating label on hover without relying on native browser tooltips.
  */
-export const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', children }) => (
+export const Tooltip: React.FC<TooltipProps> = ({ content, position = 'top', disabled = false, children }) => (
     <div className='relative group inline-flex'>
         {children}
-        <div
-            role='tooltip'
-            className={`tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50
-                text-xs px-2 py-1 rounded
-                whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`}
-            style={{ fontFamily: 'system-ui, sans-serif' }}
-        >
-            {content}
-        </div>
+        {!disabled && (
+            <div
+                role='tooltip'
+                className={`tooltip-bubble pointer-events-none absolute ${POSITION_CLASSES[position]} z-50
+                    text-xs px-2 py-1 rounded
+                    whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-150 delay-200`}
+                style={{ fontFamily: 'system-ui, sans-serif' }}
+            >
+                {content}
+            </div>
+        )}
     </div>
 );
diff --git a/Source/Common/for_Tooltip/when_rendered/and_it_is_disabled.ts b/Source/Common/for_Tooltip/when_rendered/and_it_is_disabled.ts
new file mode 100644
index 0000000..68e2f7a
--- /dev/null
+++ b/Source/Common/for_Tooltip/when_rendered/and_it_is_disabled.ts
@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Tooltip } from '../../Tooltip';
+
+describe('when Tooltip is rendered and it is disabled', () => {
+    const html = renderToStaticMarkup(
+        React.createElement(
+            Tooltip,
+            { content: 'Shapes', disabled: true },
+            React.createElement('button', null, 'Trigger'),
+        ),
+    );
+
+    it('should not render the tooltip bubble', () => {
+        html.should.not.include('role="tooltip"');
+    });
+
+    it('should still render the trigger element', () => {
+        html.should.include('Trigger');
+    });
+});
diff --git a/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
new file mode 100644
index 0000000..8dfaef3
--- /dev/null
+++ b/Source/Common/for_Tooltip/when_rendered/and_it_is_not_disabled.ts
@@ -0,0 +1,24 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Tooltip } from '../../Tooltip';
+
+describe('when Tooltip is rendered and it is not disabled', () => {
+    const html = renderToStaticMarkup(
+        React.createElement(
+            Tooltip,
+            { content: 'Shapes' },
+            React.createElement('button', null, 'Trigger'),
+        ),
+    );
+
+    it('should render the tooltip bubble', () => {
+        html.should.include('role="tooltip"');
+    });
+
+    it('should render the tooltip content', () => {
+        html.should.include('Shapes');
+    });
+});
diff --git a/Source/Toolbar/ToolbarFanOutItem.tsx b/Source/Toolbar/ToolbarFanOutItem.tsx
index 2bd591a..2fa6787 100644
--- a/Source/Toolbar/ToolbarFanOutItem.tsx
+++ b/Source/Toolbar/ToolbarFanOutItem.tsx
@@ -71,7 +71,7 @@ export const ToolbarFanOutItem = ({
 
     return (
         <div className='toolbar-fanout-item' ref={containerRef}>
-            <Tooltip content={tooltip} position={tooltipPosition}>
+            <Tooltip content={tooltip} position={tooltipPosition} disabled={isExpanded}>
                 <button
                     type='button'
                     aria-label={tooltip}
diff --git a/Source/Toolbar/ToolbarFolder.tsx b/Source/Toolbar/ToolbarFolder.tsx
index 0481271..533d465 100644
--- a/Source/Toolbar/ToolbarFolder.tsx
+++ b/Source/Toolbar/ToolbarFolder.tsx
@@ -97,7 +97,7 @@ export const ToolbarFolder = ({
     return (
         <ToolbarFolderContext.Provider value={mode}>
             <div className='toolbar-folder-item' ref={containerRef}>
-                <Tooltip content={title} position={tooltipPosition}>
+                <Tooltip content={title} position={tooltipPosition} disabled={isExpanded}>
                     <button
                         type='button'
                         aria-label={title}