tooltips improvements (#896)

* add and fix tooltips on toolbar

* move tooltips below buttons

* add global definition for tooltip hover over delay

client/src/components/brushableHistogram/index.js

@@ -461,7 +461,11 @@ class HistogramBrush extends React.Component {
               remove
             </Button>
           ) : null}
-          <Tooltip content="Use as color scale" position="bottom">
+          <Tooltip
+            content="Use as color scale"
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
             <Button
               onClick={this.handleColorAction.bind(this)}
               active={colorAccessor === field}

client/src/components/categorical/category.js

@@ -169,7 +169,11 @@ class Category extends React.Component {
               )}
             </span>
           </div>
-          <Tooltip content="Use as color scale" position="bottom">
+          <Tooltip
+            content="Use as color scale"
+            position="bottom"
+            hoverOpenDelay={globals.tooltipHoverOpenDelay}
+          >
             <Button
               data-testclass="colorby"
               data-testid={`colorby-${metadataField}`}

client/src/components/menubar/cellSetButtons.js

@@ -3,6 +3,7 @@ import React from "react";
 import { AnchorButton, Tooltip } from "@blueprintjs/core";
 import { connect } from "react-redux";
 import { World } from "../../util/stateManager";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 @connect()
 class CellSetButton extends React.Component {
@@ -38,7 +39,8 @@ class CellSetButton extends React.Component {
     return (
       <Tooltip
         content="Save current selection for differential expression computation"
-        position="top"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
       >
         <AnchorButton
           type="button"

client/src/components/menubar/clip.js

@@ -5,8 +5,10 @@ import {
   Button,
   Popover,
   NumericInput,
-  Icon
+  Icon,
+  Tooltip
 } from "@blueprintjs/core";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 function Clip(props) {
   const {
@@ -40,14 +42,20 @@ function Clip(props) {
     >
       <Popover
         target={
-          <Button
+          <Tooltip
-            type="button"
+            content="Clip all continuous values to a percentile range"
-            data-testid="visualization-settings"
+            position="bottom"
-            className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`}
+            hoverOpenDelay={tooltipHoverOpenDelay}
-            style={{
+          >
-              cursor: "pointer"
+            <Button
-            }}
+              type="button"
-          />
+              data-testid="visualization-settings"
+              className={`bp3-button bp3-icon-timeline-bar-chart ${activeClipClass}`}
+              style={{
+                cursor: "pointer"
+              }}
+            />
+          </Tooltip>
         }
         position={Position.BOTTOM_RIGHT}
         onOpening={handleClipOpening}

client/src/components/menubar/index.js

@@ -16,6 +16,7 @@ import CellSetButton from "./cellSetButtons";
 import InformationMenu from "./infoMenu";
 import UndoRedoReset from "./undoRedoReset";
 import Clip from "./clip";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 @connect(state => ({
   universe: state.universe,
@@ -299,6 +300,7 @@ class MenuBar extends React.Component {
             <Tooltip
               content="Add two cells selections, see the top 15 differentially expressed genes between them"
               position="bottom"
+              hoverOpenDelay={tooltipHoverOpenDelay}
             >
               <AnchorButton
                 disabled={!haveBothCellSets}
@@ -319,6 +321,7 @@ class MenuBar extends React.Component {
             <Tooltip
               content="Remove differentially expressed gene list and clear cell selections"
               position="bottom"
+              hoverOpenDelay={tooltipHoverOpenDelay}
             >
               <Button
                 type="button"
@@ -333,7 +336,8 @@ class MenuBar extends React.Component {
         </div>
         <Tooltip
           content="Show only metadata and cells which are currently selected"
-          position="left"
+          position="bottom"
+          hoverOpenDelay={tooltipHoverOpenDelay}
         >
           <AnchorButton
             type="button"
@@ -355,7 +359,11 @@ class MenuBar extends React.Component {
           </AnchorButton>
         </Tooltip>
         <div className="bp3-button-group">
-          <Tooltip content={selectionTooltip} position="left">
+          <Tooltip
+            content={selectionTooltip}
+            position="bottom"
+            hoverOpenDelay={tooltipHoverOpenDelay}
+          >
             <Button
               type="button"
               data-testid="mode-lasso"
@@ -372,7 +380,11 @@ class MenuBar extends React.Component {
               }}
             />
           </Tooltip>
-          <Tooltip content="Pan and zoom" position="left">
+          <Tooltip
+            content="Drag to pan, scroll to zoom"
+            position="bottom"
+            hoverOpenDelay={tooltipHoverOpenDelay}
+          >
             <Button
               type="button"
               data-testid="mode-pan-zoom"
@@ -398,14 +410,20 @@ class MenuBar extends React.Component {
         >
           <Popover
             target={
-              <Button
+              <Tooltip
-                type="button"
+                content="Select embedding for visualization"
-                data-testid="layout-choice"
+                position="bottom"
-                className="bp3-button bp3-icon-heatmap"
+                hoverOpenDelay={tooltipHoverOpenDelay}
-                style={{
+              >
-                  cursor: "pointer"
+                <Button
-                }}
+                  type="button"
-              />
+                  data-testid="layout-choice"
+                  className="bp3-button bp3-icon-heatmap"
+                  style={{
+                    cursor: "pointer"
+                  }}
+                />
+              </Tooltip>
             }
             position={Position.BOTTOM_RIGHT}
             content={

client/src/components/menubar/undoRedoReset.js

@@ -1,6 +1,7 @@
 // jshint esversion: 6
 import React from "react";
 import { AnchorButton, Tooltip } from "@blueprintjs/core";
+import { tooltipHoverOpenDelay } from "../../globals";
 
 function InformationMenu(props) {
   const {
@@ -13,7 +14,11 @@ function InformationMenu(props) {
   } = props;
   return (
     <div style={{ marginLeft: 10 }} className="bp3-button-group">
-      <Tooltip content="Undo" position="left">
+      <Tooltip
+        content="Undo"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
+      >
         <AnchorButton
           type="button"
           className="bp3-button bp3-icon-undo"
@@ -26,7 +31,11 @@ function InformationMenu(props) {
           }}
         />
       </Tooltip>
-      <Tooltip content="Redo" position="left">
+      <Tooltip
+        content="Redo"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
+      >
         <AnchorButton
           type="button"
           className="bp3-button bp3-icon-redo"
@@ -41,7 +50,8 @@ function InformationMenu(props) {
       </Tooltip>
       <Tooltip
         content="Reset cellxgene, clearing all selections"
-        position="left"
+        position="bottom"
+        hoverOpenDelay={tooltipHoverOpenDelay}
       >
         <AnchorButton
           disabled={isResetDisabled()}

client/src/globals.js

@@ -63,6 +63,9 @@ export const leftSidebarSectionHeading = {
 };
 export const leftSidebarSectionPadding = 10;
 
+/* various timing-related behaviors */
+export const tooltipHoverOpenDelay = 1000; /* ms delay before a tooltip displays */
+
 let _API = {
   // prefix: "http://api.clustering.czi.technology/api/",
   // prefix: "http://tabulamuris.cxg.czi.technology/api/",