Open tooltip on hover, show scroll on overflow y

eoghan2t9 · Jun 18, 2020 · 15db9e9 · 15db9e9
1 parent 19c0133
commit 15db9e9
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 6 deletions.
diff --git a/client/src/components/Logs/Cells/Tooltip.css b/client/src/components/Logs/Cells/Tooltip.css
@@ -6,6 +6,8 @@
     pointer-events: auto !important;
     background-color: var(--white);
     z-index: 102;
+    overflow-y: scroll;
+    max-height: 100%;
 }
 
 .white-space--nowrap {
@@ -65,10 +67,6 @@
     .grid .key-colon, .grid .title--border {
         font-weight: bold;
     }
-
-    .tooltip__container  {
-        overflow-y: scroll;
-    }
 }
 
 .grid .key-colon:nth-child(odd)::after {

diff --git a/client/src/components/Logs/Cells/getHintElement.js b/client/src/components/Logs/Cells/getHintElement.js
@@ -5,6 +5,7 @@ import { Trans } from 'react-i18next';
 import classNames from 'classnames';
 import './Tooltip.css';
 import 'react-popper-tooltip/dist/styles.css';
+import { HIDE_TOOLTIP_DELAY } from '../../../helpers/constants';
 
 const getHintElement = ({
     className,
@@ -22,7 +23,7 @@ const getHintElement = ({
             <Trans>{item || '—'}</Trans>
         </div>,
     ),
-}) => <TooltipTrigger placement={placement} trigger="click" tooltip={
+}) => <TooltipTrigger placement={placement} trigger="hover" delayHide={HIDE_TOOLTIP_DELAY} tooltip={
         ({
             tooltipRef,
             getTooltipProps,
@@ -54,7 +55,6 @@ getHintElement.propTypes = {
     placement: PropTypes.string,
     canShowTooltip: PropTypes.string,
     xlinkHref: PropTypes.string,
-    scrollHide: PropTypes.bool,
     content: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.array,

diff --git a/client/src/helpers/constants.js b/client/src/helpers/constants.js
@@ -57,6 +57,7 @@ export const DEBOUNCE_FILTER_TIMEOUT = 500;
 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 UNSAFE_PORTS = [
     1,