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.
This commit is contained in:
@@ -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,
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user