From aff98b0c20f77f8592084f3cb4eb9e08d8653bd1 Mon Sep 17 00:00:00 2001
From: "Robin E. R. Davies" <rerdavies@gmail.com>
Date: Sat, 21 Jun 2025 15:26:26 -0400
Subject: [PATCH] Disable tooltip when intereacting.

---
 todo.txt                                      |  4 --
 vite/src/pipedal/AppThemed.css                | 50 +++++++-------
 vite/src/pipedal/ButtonEx.tsx                 | 10 ++-
 vite/src/pipedal/ButtonTooltip.tsx            |  6 +-
 vite/src/pipedal/ControlTooltip.tsx           | 12 ++--
 vite/src/pipedal/FilePropertyControl.tsx      | 14 ++--
 vite/src/pipedal/IconButtonEx.tsx             |  8 +--
 vite/src/pipedal/MainPage.tsx                 |  7 +-
 .../src/pipedal/MidiChannelBindingControl.tsx |  8 +--
 vite/src/pipedal/PluginControlView.tsx        |  7 +-
 vite/src/pipedal/ToolTipEx.tsx                | 66 +++++++++++++++++++
 11 files changed, 123 insertions(+), 69 deletions(-)
 create mode 100644 vite/src/pipedal/ToolTipEx.tsx

diff --git a/todo.txt b/todo.txt
index 4e3bc90..49d2298 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,12 +1,8 @@
 
-Numeric up-down buttons blown in light theme.
 
 Tooltips on touch ui? 
 
 
-convolution reverb broken.
-
-
 - pipewire aux in?
 
 
diff --git a/vite/src/pipedal/AppThemed.css b/vite/src/pipedal/AppThemed.css
index 9300251..87d75d3 100644
--- a/vite/src/pipedal/AppThemed.css
+++ b/vite/src/pipedal/AppThemed.css
@@ -4,43 +4,45 @@
     margin-top: 0px;
     margin-bottom: 0px;
 }
+
 .fossCopyrights {
     padding-top: 16px;
     padding-bottom: 16px;
 }
+
 .fossLicense {
     padding-left: 36px;
     border-bottom: 1px #CCC solid
 }
+
 div {
     min-width: 0;
-    background: "red";
-  }
-
-input[type="number"].scrollMod::-webkit-outer-spin-button, 
-input[type="number"].scrollMod::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    color: #FFF;
-    background: #0001 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
-    filter: invert(100%);
-    width: 1em;
-    padding: 2px;
-    opacity: .6; /* shows Spin Buttons per default (Chrome >= 39) */
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-}
-input[type="number"].scrollMod::-webkit-inner-spin-button:hover,
-input[type="number"].scrollMod::-webkit-inner-spin-button:active {
-    background: #0003 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
-    opacity: .8;
 }
 
+@media not all  /* seems to be ok in current chrome (prefers-color-scheme: light) */{
+    input[type="number"].scrollMod::-webkit-outer-spin-button,
+    input[type="number"].scrollMod::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        color: #FFF;
+        background: #0001 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
+        filter: invert(100%);
+        width: 1em;
+        padding: 2px;
+        opacity: .6;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    input[type="number"].scrollMod::-webkit-inner-spin-button:hover,
+    input[type="number"].scrollMod::-webkit-inner-spin-button:active {
+        background: #0003 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
+        opacity: .8;
+    }
+}
 input[type=number] {
-  -moz-appearance: textfield;
+    -moz-appearance: textfield;
 }
 
 
-
-
diff --git a/vite/src/pipedal/ButtonEx.tsx b/vite/src/pipedal/ButtonEx.tsx
index 0aae3e1..55f5f84 100644
--- a/vite/src/pipedal/ButtonEx.tsx
+++ b/vite/src/pipedal/ButtonEx.tsx
@@ -22,7 +22,7 @@
  */
 
 import Button, {ButtonProps} from '@mui/material/Button';
-import Tooltip from "@mui/material/Tooltip";
+import ToolTipEx from './ToolTipEx';
 import Typography from "@mui/material/Typography";
 
 
@@ -34,19 +34,17 @@ function ButtonEx(props: ButtonExProps) {
     const { tooltip, style, ...extra } = props;
 
     return (
-        <Tooltip title={
+        <ToolTipEx title={
             (
-                <Typography variant="caption">{tooltip || extra['aria-label']}</Typography>
+                <Typography variant="caption">{tooltip}</Typography>
             )
         }
-            placement="top-start" arrow
-            enterDelay={1500} enterNextDelay={1500}
         >
             <span> 
                 {/* Using span to prevent tooltip from disappearing when button is disabled */}
                 <Button {...extra} style={style} />
             </span>
-        </Tooltip>
+        </ToolTipEx>
     );
 }
 export default ButtonEx;    
\ No newline at end of file
diff --git a/vite/src/pipedal/ButtonTooltip.tsx b/vite/src/pipedal/ButtonTooltip.tsx
index 7412eef..81bf40f 100644
--- a/vite/src/pipedal/ButtonTooltip.tsx
+++ b/vite/src/pipedal/ButtonTooltip.tsx
@@ -22,7 +22,7 @@
  */
 
 import { Typography } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
+import ToolTipEx from "./ToolTipEx";
 import { ReactElement } from "react";
 
 
@@ -34,7 +34,7 @@ export interface ButtonTooltipProps {
 export default function ButtonTooltip(props: ButtonTooltipProps)
 {
     return (
-        <Tooltip placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
+        <ToolTipEx
             title={
                 (
                     <Typography variant="body2">
@@ -44,6 +44,6 @@ export default function ButtonTooltip(props: ButtonTooltipProps)
             }
          >
             {props.children}
-        </Tooltip>
+        </ToolTipEx>
     );
 }
\ No newline at end of file
diff --git a/vite/src/pipedal/ControlTooltip.tsx b/vite/src/pipedal/ControlTooltip.tsx
index 344c096..074efab 100644
--- a/vite/src/pipedal/ControlTooltip.tsx
+++ b/vite/src/pipedal/ControlTooltip.tsx
@@ -1,9 +1,9 @@
 
 import React, { ReactElement } from 'react';
-import Tooltip from "@mui/material/Tooltip"
 import { UiControl } from './Lv2Plugin';
 import Typography from "@mui/material/Typography";
 import Divider from '@mui/material/Divider';
+import ToolTipEx from './ToolTipEx'
 
 
 interface ControlTooltipProps {
@@ -16,7 +16,7 @@ export default function ControlTooltip(props: ControlTooltipProps) {
     let { children, uiControl } = props;
     if (uiControl.comment && (uiControl.comment !== uiControl.name)) {
         return (
-            <Tooltip title={(
+            <ToolTipEx title={(
                 <React.Fragment>
                     <Typography variant="caption">{uiControl.name}</Typography>
                     <Divider />
@@ -24,18 +24,16 @@ export default function ControlTooltip(props: ControlTooltipProps) {
 
                 </React.Fragment>
             )}
-                placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
             >
                 {children}
-            </Tooltip>
+            </ToolTipEx>
         );
     } else {
         return (
-            <Tooltip title={uiControl.name}
-                placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
+            <ToolTipEx title={uiControl.name}
             >
                 {children}
-            </Tooltip>
+            </ToolTipEx>
         );
     }
 }
diff --git a/vite/src/pipedal/FilePropertyControl.tsx b/vite/src/pipedal/FilePropertyControl.tsx
index 04a4f49..5419933 100644
--- a/vite/src/pipedal/FilePropertyControl.tsx
+++ b/vite/src/pipedal/FilePropertyControl.tsx
@@ -33,7 +33,7 @@ import ButtonBase from '@mui/material/ButtonBase'
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import { PedalboardItem } from './Pedalboard';
 import { isDarkMode } from './DarkMode';
-import Tooltip from "@mui/material/Tooltip"
+
 
 export const StandardItemSize = { width: 80, height: 140 }
 
@@ -225,14 +225,10 @@ const FilePropertyControl =
                     {/* TITLE SECTION */}
                     <div className={classes.titleSection}
                     >
-                        <Tooltip title={fileProperty.label} placement="top-start" arrow
-                            enterDelay={1000} enterNextDelay={1000}
-                        >
-                            <Typography variant="caption" display="block" noWrap style={{
-                                width: "100%",
-                                textAlign: "start"
-                            }}> {fileProperty.label}</Typography>
-                        </Tooltip>
+                        <Typography variant="caption" display="block" noWrap style={{
+                            width: "100%",
+                            textAlign: "start"
+                        }}> {fileProperty.label}</Typography>
                     </div>
                     {/* CONTROL SECTION */}
 
diff --git a/vite/src/pipedal/IconButtonEx.tsx b/vite/src/pipedal/IconButtonEx.tsx
index e54692f..6248d4e 100644
--- a/vite/src/pipedal/IconButtonEx.tsx
+++ b/vite/src/pipedal/IconButtonEx.tsx
@@ -22,7 +22,7 @@
  */
 
 import IconButton, {IconButtonProps} from '@mui/material/IconButton';
-import Tooltip from "@mui/material/Tooltip";
+import ToolTipEx from './ToolTipEx';
 import Typography from "@mui/material/Typography";
 
 interface IconButtonExProps extends IconButtonProps {
@@ -34,16 +34,14 @@ function IconButtonEx(props: IconButtonExProps) {
     const { tooltip,style, ...extra   } = props;
     
     return (
-        <Tooltip title={
+        <ToolTipEx title={
             (
                 <Typography variant="caption">{tooltip || extra['aria-label'] }</Typography>
             )
         }
-            placement="top-start" arrow 
-            enterDelay={1500} enterNextDelay={1500}
         >   
             <IconButton {...extra} style={style}  />
-        </Tooltip>
+        </ToolTipEx>
     );
 }
 
diff --git a/vite/src/pipedal/MainPage.tsx b/vite/src/pipedal/MainPage.tsx
index f618bc7..23b9a78 100644
--- a/vite/src/pipedal/MainPage.tsx
+++ b/vite/src/pipedal/MainPage.tsx
@@ -23,8 +23,8 @@ import WithStyles, {withTheme} from './WithStyles';
 import { withStyles } from "tss-react/mui";
 import IconButtonEx from './IconButtonEx';
 import ButtonEx from './ButtonEx';
-import Tooltip from '@mui/material/Tooltip';
 
+import ToolTipEx from './ToolTipEx';
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 import {
     Pedalboard, PedalboardItem, PedalboardSplitItem, SplitType
@@ -530,9 +530,10 @@ export const MainPage =
                             }} >
                                 <div style={{ flex: "0 0 auto", width: this.state.splitControlBar? undefined:  80 }} >
                                     <div style={{ display: bypassVisible ? "block" : "none", width: this.state.splitControlBar? undefined:  80 }} >
-                                        <Tooltip title="Bypass" placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}>
+                                        <ToolTipEx title="Bypass" 
+                                        >
                                             <Switch color="secondary" checked={bypassChecked} onChange={this.handleEnableCurrentItemChanged} />
-                                        </Tooltip>
+                                        </ToolTipEx>
                                     </div>
                                 </div>
                                 {
diff --git a/vite/src/pipedal/MidiChannelBindingControl.tsx b/vite/src/pipedal/MidiChannelBindingControl.tsx
index db7b086..dbcef51 100644
--- a/vite/src/pipedal/MidiChannelBindingControl.tsx
+++ b/vite/src/pipedal/MidiChannelBindingControl.tsx
@@ -26,7 +26,7 @@ import { withStyles } from "tss-react/mui";
 import { PiPedalModel, PiPedalModelFactory } from './PiPedalModel';
 import { pluginControlStyles } from './PluginControl';
 import MidiChannelBinding from './MidiChannelBinding';
-import Tooltip from '@mui/material/Tooltip';
+import ToolTipEx from './ToolTipEx';
 import Typography from '@mui/material/Typography';
 import Divider from '@mui/material/Divider';
 import ButtonBase from '@mui/material/ButtonBase';
@@ -78,7 +78,7 @@ const MidiChannelBindingControl =
                                     alignSelf: "stretch"
 
                                 }}>
-                            <Tooltip title={(
+                            <ToolTipEx title={(
                                 <React.Fragment>
                                     <Typography variant="caption">title</Typography>
                                     <Divider />
@@ -86,13 +86,13 @@ const MidiChannelBindingControl =
 
                                 </React.Fragment>
                             )}
-                                placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
+                                
                             >
                                 <Typography variant="caption" display="block" noWrap style={{
                                     width: "100%",
                                     textAlign: "center"
                                 }}> MIDI</Typography>
-                            </Tooltip>
+                            </ToolTipEx>
 
                         </div>
                         {/* CONTROL SECTION */}
diff --git a/vite/src/pipedal/PluginControlView.tsx b/vite/src/pipedal/PluginControlView.tsx
index 005a814..0a73410 100644
--- a/vite/src/pipedal/PluginControlView.tsx
+++ b/vite/src/pipedal/PluginControlView.tsx
@@ -42,7 +42,7 @@ import JsonAtom from './JsonAtom';
 import PluginOutputControl from './PluginOutputControl';
 import Units from './Units';
 import ToobFrequencyResponseView from './ToobFrequencyResponseView';
-import Tooltip from '@mui/material/Tooltip';
+import ToolTipEx from './ToolTipEx';
 import MidiChannelBindingControl from './MidiChannelBindingControl';
 import MidiChannelBinding from './MidiChannelBinding';
 
@@ -697,11 +697,10 @@ const PluginControlView =
                         result.push((
                             <div key={"ctlx" + (this.controlKeyIndex++)} className={!isLandscapeGrid ? classes.portGroup : classes.portGroupLandscape}>
                                 <div className={classes.portGroupTitle}>
-                                    <Tooltip title={controlGroup.name}
-                                        placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
+                                    <ToolTipEx title={controlGroup.name}
                                     >
                                         <Typography noWrap variant="caption" >{controlGroup.name}</Typography>
-                                    </Tooltip>
+                                    </ToolTipEx>
                                 </div>
                                 <div className={
                                     this.state.landscapeGrid ? classes.portGroupControlsLandscape : classes.portGroupControls} >
diff --git a/vite/src/pipedal/ToolTipEx.tsx b/vite/src/pipedal/ToolTipEx.tsx
new file mode 100644
index 0000000..9c0d9a4
--- /dev/null
+++ b/vite/src/pipedal/ToolTipEx.tsx
@@ -0,0 +1,66 @@
+/*
+ *   Copyright (c) 2025 Robin E. R. Davies
+ *   All rights reserved.
+
+ *   Permission is hereby granted, free of charge, to any person obtaining a copy
+ *   of this software and associated documentation files (the "Software"), to deal
+ *   in the Software without restriction, including without limitation the rights
+ *   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ *   copies of the Software, and to permit persons to whom the Software is
+ *   furnished to do so, subject to the following conditions:
+ 
+ *   The above copyright notice and this permission notice shall be included in all
+ *   copies or substantial portions of the Software.
+ 
+ *   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ *   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ *   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ *   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ *   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ *   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ *   SOFTWARE.
+ */
+
+import React from 'react';
+import Tooltip from '@mui/material/Tooltip';
+
+export interface ToolTipExProps extends React.ComponentProps<typeof Tooltip> {
+}
+
+function ToolTipEx(props: ToolTipExProps) {
+    let [disableToolTip, setDisableToolTip] = React.useState(false);
+    let {title, ...extras} = props;
+    function handleMouseDownCapture(event: React.PointerEvent<HTMLDivElement>) {
+        if ((event as any).pointerType === "mouse") {
+            setDisableToolTip(true);
+        }
+    }
+
+    function handlePointerMoveCapture(event: React.PointerEvent<HTMLDivElement>) {
+        if ((event as any).pointerType !== "mouse") {
+            setDisableToolTip(false);
+        }
+    }
+    return (
+        <div 
+            onPointerDownCapture={(e) => {
+                handleMouseDownCapture(e);
+            }}
+            onPointerMoveCapture={(e) => {
+                handlePointerMoveCapture(e);
+            }}
+            onMouseLeave={() => {
+                setDisableToolTip(false);
+            }
+            }
+        >
+            <Tooltip {...extras}
+                title={disableToolTip? undefined: title}
+                placement="top-start" arrow enterDelay={1500} enterNextDelay={1500}
+
+            />
+        </div>
+    )
+}
+
+export default ToolTipEx;
\ No newline at end of file