From 764bd106a7f2ffc619d945601ea9696c645f0419 Mon Sep 17 00:00:00 2001 From: Daniel Hiller Date: Thu, 17 Sep 2026 00:42:11 +0200 Subject: [PATCH] fix: Keep tooltips off touch devices A tooltip triggered by hover and focus also fires on a tap, because tapping a button focuses it. On a phone the hint then covers the thing that was just pressed, and it stays there until something else takes focus. There is no moment before a click for it to fill. `IS_TOUCH_PRIMARY` reads `(hover: none)` once at load, the way `IS_MAC` reads the platform, and the tooltip renders its trigger bare when it is set. --- client/src/constants/Config.js | 6 ++++++ client/src/lib/custom-ui/components/Tooltip/Tooltip.jsx | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/client/src/constants/Config.js b/client/src/constants/Config.js index 029e75ee..5c372b04 100755 --- a/client/src/constants/Config.js +++ b/client/src/constants/Config.js @@ -18,6 +18,11 @@ const MAX_SIZE_TO_DISPLAY_CONTENT = 256 * 1024; const IS_MAC = navigator.platform.startsWith('Mac'); +// Where the pointer cannot hover there is no room for a tooltip: a tap gives the +// button focus, and a hint meant for the moment before a click ends up covering +// the thing that was just clicked. +const IS_TOUCH_PRIMARY = window.matchMedia('(hover: none)').matches; + export default { BASE_PATH, ACCESS_TOKEN_KEY, @@ -29,4 +34,5 @@ export default { ACTIVITIES_LIMIT, MAX_SIZE_TO_DISPLAY_CONTENT, IS_MAC, + IS_TOUCH_PRIMARY, }; diff --git a/client/src/lib/custom-ui/components/Tooltip/Tooltip.jsx b/client/src/lib/custom-ui/components/Tooltip/Tooltip.jsx index 50bd625d..06430f04 100644 --- a/client/src/lib/custom-ui/components/Tooltip/Tooltip.jsx +++ b/client/src/lib/custom-ui/components/Tooltip/Tooltip.jsx @@ -7,6 +7,8 @@ import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import { Popup as SemanticUIPopup } from 'semantic-ui-react'; +import Config from '../../../../constants/Config'; + import styles from './Tooltip.module.css'; const callAll = @@ -32,7 +34,7 @@ const Tooltip = React.forwardRef( }); }, [children, content, props, ref, ariaLabel, onClick]); - if (disabled || !content) { + if (disabled || !content || Config.IS_TOUCH_PRIMARY) { return trigger; }