#RI-5213, #RI-5212 - fix tooltip appearing

Author: rsergeenko

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/StringDetailsTable.tsx

@@ -191,28 +191,24 @@ const StringDetailsTable = (props: Props) => {
           />
         )}
         {!isEditItem && (
-          <EuiText
-            className={styles.stringValue}
-            onClick={() => isEditable && setIsEdit(true)}
-            style={{ whiteSpace: 'break-spaces' }}
-            data-testid="string-value"
+          <EuiToolTip
+            title={!isValid ? noEditableText : undefined}
+            anchorClassName={styles.tooltipAnchor}
+            className={styles.tooltip}
+            position="top"
+            data-testid="string-value-tooltip"
           >
-            {areaValue !== ''
-              ? (isValid
+            <EuiText
+              className={styles.stringValue}
+              onClick={() => isEditable && setIsEdit(true)}
+              style={{ whiteSpace: 'break-spaces' }}
+              data-testid="string-value"
+            >
+              {areaValue !== ''
                 ? value
-                : (
-                  <EuiToolTip
-                    title={noEditableText}
-                    className={styles.tooltip}
-                    position="bottom"
-                    data-testid="string-value-tooltip"
-                  >
-                    <>{value}</>
-                  </EuiToolTip>
-                )
-              )
-              : (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
-          </EuiText>
+                : (!isLoading && (<span style={{ fontStyle: 'italic' }}>Empty</span>))}
+            </EuiText>
+          </EuiToolTip>
         )}
         {isEditItem && (
           <InlineItemEditor

redisinsight/ui/src/pages/browser/modules/key-details/components/string-details/string-details-table/styles.module.scss

@@ -29,11 +29,7 @@ $outer-height-mobile: 340px;
   overflow-y: auto;
   overflow-x: hidden;
   word-break: break-word;
-
-  font: inherit !important;
-  color: inherit !important;
-  padding: 0 !important;
-  background: inherit !important;
+  line-height: 1.2;
 
   pre {
     background-color: transparent !important;
@@ -48,6 +44,11 @@ $outer-height-mobile: 340px;
   }
 }
 
+.tooltipAnchor {
+  display: inline-flex !important;
+  height: 100%;
+}
+
 .stringFooterBtn {
   &:global(.euiButton) {
     color: var(--euiTextSubduedColor) !important;