From d154456ae52c349d5858bfc51dd293fe2bf3c1fe Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Sat, 1 Aug 2020 13:38:26 +0300
Subject: [PATCH 1/2] - client: tooltip show delay
---
client/src/components/ui/Tooltip.js | 13 +++++++++----
client/src/helpers/constants.js | 2 +-
2 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/client/src/components/ui/Tooltip.js b/client/src/components/ui/Tooltip.js
index 69227d20..d5cc31e8 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,26 @@ 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;
+ let delayHideValue = delayHide;
+ let delayShowValue = delayShow;
if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) {
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 +75,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 8b84e558..9f547e25 100644
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -62,7 +62,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 = [
From ce21514246dfc89f1178d9346769317f1fff4d05 Mon Sep 17 00:00:00 2001
From: Ildar Kamalov <ik@adguard.com>
Date: Sat, 1 Aug 2020 16:25:56 +0300
Subject: [PATCH 2/2] - client: check touch events for tooltips
---
client/src/components/ui/Tooltip.js | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/client/src/components/ui/Tooltip.js b/client/src/components/ui/Tooltip.js
index d5cc31e8..284a53a3 100644
--- a/client/src/components/ui/Tooltip.js
+++ b/client/src/components/ui/Tooltip.js
@@ -22,11 +22,13 @@ const Tooltip = ({
delayHide = HIDE_TOOLTIP_DELAY,
}) => {
const { t } = useTranslation();
+ const touchEventsAvailable = 'ontouchstart' in window;
+
let triggerValue = trigger;
let delayHideValue = delayHide;
let delayShowValue = delayShow;
- if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches) {
+ if (window.matchMedia(`(max-width: ${MEDIUM_SCREEN_SIZE}px)`).matches || touchEventsAvailable) {
triggerValue = 'click';
delayHideValue = 0;
delayShowValue = 0;