add/fix label tooltips (#1278)

* Move tooltip to right

* Change function to only return truncated string

* add tooltip to category label

* use position instead of PopoutPosition

client/src/components/categorical/category.js

@@ -2,7 +2,13 @@ import React from "react";
 import _ from "lodash";
 import { connect } from "react-redux";
 import { FaChevronRight, FaChevronDown } from "react-icons/fa";
-import { AnchorButton, Button, Tooltip, Icon } from "@blueprintjs/core";
+import {
+  AnchorButton,
+  Button,
+  Tooltip,
+  Icon,
+  Position
+} from "@blueprintjs/core";
 import CategoryFlipperLayout from "./categoryFlipperLayout";
 import AnnoMenu from "./annoMenuCategory";
 import AnnoDialogEditCategoryName from "./annoDialogEditCategoryName";
@@ -164,6 +170,11 @@ class Category extends React.Component {
       false
     );
 
+    const truncatedString = maybeTruncateString(
+      metadataField,
+      globals.categoryDisplayStringMaxLength
+    );
+
     return (
       <CategoryFlipperLayout
         metadataField={metadataField}
@@ -191,6 +202,17 @@ class Category extends React.Component {
             />
             <span className="bp3-control-indicator" />
           </label>
+          <Tooltip
+            content={metadataField}
+            disabled={truncatedString === null}
+            hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
+            position={Position.LEFT}
+            usePortal
+            modifiers={{
+              preventOverflow: { enabled: false },
+              hide: { enabled: false }
+            }}
+          >
             <span
               data-testid={`${metadataField}:category-expand`}
               style={{
@@ -209,10 +231,7 @@ class Category extends React.Component {
               {isUserAnno ? (
                 <Icon style={{ marginRight: 5 }} icon="tag" iconSize={16} />
               ) : null}
-            {maybeTruncateString(
+              {truncatedString || metadataField}
-              metadataField,
-              globals.categoryDisplayStringMaxLength
-            )}
               {isExpanded ? (
                 <FaChevronDown
                   data-testclass="category-expand-is-expanded"
@@ -225,6 +244,7 @@ class Category extends React.Component {
                 />
               )}
             </span>
+          </Tooltip>
         </div>
         {<AnnoDialogEditCategoryName metadataField={metadataField} />}
         {<AnnoDialogAddLabel metadataField={metadataField} />}

client/src/components/categorical/value.js

@@ -393,6 +393,12 @@ class CategoryValue extends React.Component {
               content={displayString}
               disabled={truncatedString === null}
               hoverOpenDelay={globals.tooltipHoverOpenDelayQuick}
+              position={Position.LEFT}
+              usePortal
+              modifiers={{
+                preventOverflow: { enabled: false },
+                hide: { enabled: false }
+              }}
             >
               <span
                 data-testid={`categorical-value-${metadataField}-${displayString}`}

client/src/util/maybeTruncateString.js

@@ -1,18 +1,12 @@
 const maybeTruncateString = (str, maxLength) => {
-
   let truncatedString = null;
-  if (
+  if (str.length > maxLength) {
-    str.length > maxLength
+    truncatedString = `${str.slice(0, maxLength / 2)}…${str.slice(
-  ) {
-    truncatedString = `${str.slice(
-      0,
-      maxLength / 2
-    )}…${str.slice(
       -maxLength / 2
     )}`;
   }
 
-  return truncatedString || str;
+  return truncatedString;
-}
+};
 
 export default maybeTruncateString;