Merge pull request #204 from SizeMeCom/fix-meas-input-tooltip-visibility

Different timeout method for measurement input tooltip show
SizeMeCom · Nov 8, 2021 · 7e5069f · 7e5069f
2 parents 09701cc + a444eda
commit 7e5069f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/common/MeasurementInput.jsx b/src/common/MeasurementInput.jsx
@@ -58,6 +58,10 @@ class MeasurementInput extends React.Component {
             clearTimeout(this.timeout);
             this.timeout = null;
         }
+        if (this.tooltipTimeout) {
+            clearTimeout(this.tooltipTimeout);
+            this.tooltipTimeout = null;
+        }
 
         // because isBlur could be an event
         const blur = isBlur === true;
@@ -111,7 +115,7 @@ class MeasurementInput extends React.Component {
 
     onFocus = () => {
         this.props.onFocus();
-        ReactTooltip.show(this.tooltip);
+        this.tooltipTimeout = setTimeout(() => {ReactTooltip.show(this.tooltip);}, 200);
     };
 
     onKeyDown = e => {

diff --git a/src/common/SizeForm.jsx b/src/common/SizeForm.jsx
@@ -146,7 +146,7 @@ class SizeForm extends React.Component {
                         ).orElse(null)}
                     </div>
                 ))}
-                <ReactTooltip id="input-tooltip" type="light" resizeHide={false} delayShow={200} getContent={this.tooltipContent(t)}/>
+                <ReactTooltip id="input-tooltip" type="light" resizeHide={false} getContent={this.tooltipContent(t)}/>
                 <Modal isOpen={this.state.guideModalOpen}
                        onRequestClose={this.closeGuideModal}
                        className="measurement-guide-modal"

diff --git a/src/common/SizeForm.scss b/src/common/SizeForm.scss
@@ -105,6 +105,10 @@
     pointer-events: all;
     margin-left: 15px;
 
+    &.place-top {
+      margin-top: -40px;
+    }
+
     ul {
       background-color: $bg_color;
       color: black;