Make tooltip position absolute for touch

eoghan2t9 · Jun 17, 2020 · 5f10806 · 5f10806
1 parent 4c30a58
commit 5f10806
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 5 deletions.
diff --git a/client/src/components/Logs/Logs.css b/client/src/components/Logs/Logs.css
@@ -12,6 +12,12 @@
     text-overflow: ellipsis;
 }
 
+@media (hover: none) {
+    .logs__row {
+        position: initial;
+    }
+}
+
 .logs__row--center {
     justify-content: center;
 }
@@ -105,8 +111,15 @@
 
 .logs__action {
     position: absolute;
-    top: 0px;
-    right: 15px;
+    top: 0;
+    right: 1rem;
+}
+
+@media (hover: none) {
+    .logs__action {
+        top: 1rem !important;
+        right: 1rem;
+    }
 }
 
 .logs__action--detailed {
@@ -118,6 +131,13 @@
     position: relative;
 }
 
+@media (hover: none) {
+    .logs__table .rt-td,
+    .clients__table .rt-td {
+        position: initial;
+    }
+}
+
 .logs__table .rt-thead, .logs__table .rt-tbody {
     min-width: 100% !important;
 }

diff --git a/client/src/components/Logs/Tooltip/ReactTooltip.css b/client/src/components/Logs/Tooltip/ReactTooltip.css
@@ -6,6 +6,13 @@
     pointer-events: auto !important;
 }
 
+@media (hover: none) {
+    .custom-tooltip {
+        position: absolute !important;
+        top: 4rem !important;
+    }
+}
+
 .white-space--nowrap {
     white-space: nowrap !important;
 }

diff --git a/client/src/components/Logs/Tooltip/index.js b/client/src/components/Logs/Tooltip/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';
 import classNames from 'classnames';
 import './ReactTooltip.css';
-import { TouchMediaQuery } from '../../../helpers/constants';
+import { touchMediaQuery } from '../../../helpers/constants';
 
 const Tooltip = ({
     id, children, className = '', place = 'right', trigger = 'hover', overridePosition, scrollHide = true,
@@ -21,7 +21,7 @@ const Tooltip = ({
             arrowColor="transparent"
             textColor="#4d4d4d"
             delayHide={300}
-            scrollHide={window.matchMedia(TouchMediaQuery).matches ? false : scrollHide}
+            scrollHide={window.matchMedia(touchMediaQuery).matches ? false : scrollHide}
             trigger={trigger}
             overridePosition={overridePosition}
             globalEventOff="click touchend"

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -504,4 +504,4 @@ export const FORM_NAME = {
 
 export const smallScreenSize = 767;
 
-export const TouchMediaQuery = '(hover: none)';
+export const touchMediaQuery = '(hover: none)';