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;