diff --git a/client/src/components/ui/Tooltip.js b/client/src/components/ui/Tooltip.js index 69227d20..284a53a3 100644 --- a/client/src/components/ui/Tooltip.js +++ b/client/src/components/ui/Tooltip.js @@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'; import { HIDE_TOOLTIP_DELAY, - HIDE_TOOLTIP_CLICK_DELAY, MEDIUM_SCREEN_SIZE, + SHOW_TOOLTIP_DELAY, } from '../../helpers/constants'; import 'react-popper-tooltip/dist/styles.css'; import './Tooltip.css'; @@ -18,22 +18,28 @@ const Tooltip = ({ className = 'tooltip-container', placement = 'bottom', trigger = 'hover', + delayShow = SHOW_TOOLTIP_DELAY, delayHide = HIDE_TOOLTIP_DELAY, }) => { const { t } = useTranslation(); - let triggerValue = trigger; - let delayValue = delayHide; + const touchEventsAvailable = 'ontouchstart' in window; - if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) { + let triggerValue = trigger; + let delayHideValue = delayHide; + let delayShowValue = delayShow; + + if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches || touchEventsAvailable) { triggerValue = 'click'; - delayValue = HIDE_TOOLTIP_CLICK_DELAY; + delayHideValue = 0; + delayShowValue = 0; } return ( <TooltipTrigger placement={placement} trigger={triggerValue} - delayHide={delayValue} + delayHide={delayHideValue} + delayShow={delayShowValue} tooltip={({ tooltipRef, getTooltipProps }) => ( <div {...getTooltipProps({ @@ -71,6 +77,7 @@ Tooltip.propTypes = { placement: propTypes.string, trigger: propTypes.string, delayHide: propTypes.string, + delayShow: propTypes.string, className: propTypes.string, triggerClass: propTypes.string, }; diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js index 2856b156..addffb0f 100644 --- a/client/src/helpers/constants.js +++ b/client/src/helpers/constants.js @@ -72,7 +72,7 @@ export const CHECK_TIMEOUT = 1000; export const SUCCESS_TOAST_TIMEOUT = 5000; export const FAILURE_TOAST_TIMEOUT = 30000; export const HIDE_TOOLTIP_DELAY = 300; -export const HIDE_TOOLTIP_CLICK_DELAY = 100; +export const SHOW_TOOLTIP_DELAY = 200; export const MODAL_OPEN_TIMEOUT = 150; export const UNSAFE_PORTS = [