Cell Tooltip - Focus Issues (#1422)

* change level tooltip gets rendered and level it gets triggered

* remove unsed editors and fix imports.

* re order inclusion of frozen cells to avoid z-index css.

* address comments

* Revert "remove unsed editors and fix imports."

This reverts commit 3b22f60.

* fix issues

* fix issues

* remove extra space

Author: JamesPortelli

packages/react-data-grid/src/Cell.js

@@ -174,7 +174,7 @@ class Cell extends React.PureComponent {
     let extraClasses = joinClasses({
       'row-selected': this.props.isRowSelected,
       editing: this.isEditorEnabled(),
-      'cell-tooltip': this.props.tooltip ? true : false,
+      'has-tooltip': this.props.tooltip ? true : false,
       'rdg-child-cell': this.props.expandableOptions && this.props.expandableOptions.subRowDetails && this.props.expandableOptions.treeDepth > 0,
       'last-column': this.props.column.isLastColumn
     });
@@ -317,13 +317,20 @@ class Cell extends React.PureComponent {
     if (treeDepth > 0 && isExpandCell) {
       cellDeleter = <ChildRowDeleteButton treeDepth={treeDepth} cellHeight={this.props.height} siblingIndex={this.props.expandableOptions.subRowDetails.siblingIndex} numberSiblings={this.props.expandableOptions.subRowDetails.numberSiblings} onDeleteSubRow={this.onDeleteSubRow} isDeleteSubRowEnabled={isDeleteSubRowEnabled} />;
     }
+
+    const tooltip = this.props.tooltip && (<span className="cell-tooltip-text">{this.props.tooltip}</span>);
+    const classes = joinClasses('react-grid-Cell__value',
+      { 'cell-tooltip': this.props.tooltip ? true : false }
+    );
+
     return (
-      <div className="react-grid-Cell__value">
+      <div className={classes}>
         {cellDeleter}
         <div style={{ marginLeft, position: 'relative', top: '50%', transform: 'translateY(-50%)' }}>
           <span>{CellContent}</span>
           {this.props.cellControls}
         </div>
+        {tooltip}
       </div>
     );
   };
@@ -347,8 +354,7 @@ class Cell extends React.PureComponent {
       isScrolling
     });
 
-    let events = this.getEvents();
-    const tooltip = this.props.tooltip ? (<span className="cell-tooltip-text">{this.props.tooltip}</span>) : null;
+    const events = this.getEvents();
 
     const cellExpander =  this.canExpand() && (
       <CellExpand expandableOptions={this.props.expandableOptions} onCellExpand={this.onCellExpand} />
@@ -365,7 +371,6 @@ class Cell extends React.PureComponent {
         {cellActionButtons}
         {cellExpander}
         {cellContent}
-        {tooltip}
       </div>
     );
   }

packages/react-data-grid/src/Row.js

@@ -91,7 +91,7 @@ class Row extends React.Component {
     const { colOverscanStartIdx, colOverscanEndIdx, columns } = this.props;
     const frozenColumns = columns.filter(c => columnUtils.isFrozen(c));
     const nonFrozenColumnsToRender = columns.slice(colOverscanStartIdx, colOverscanEndIdx + 1).filter(c => !columnUtils.isFrozen(c));
-    return frozenColumns.concat(nonFrozenColumnsToRender)
+    return nonFrozenColumnsToRender.concat(frozenColumns)
       .map(column => this.getCell(column));
   };
 

packages/react-data-grid/src/__tests__/Row.spec.js

@@ -137,13 +137,6 @@ describe('Row', () => {
           const renderedRange = colOverscanEndIdx - colOverscanStartIdx + 1;
           expect(cells.length).toBe(renderedRange);
         });
-
-        it('first rendered cell index should be first frozen cell', () => {
-          const columns = lockColumns(LAST_LOCKED_CELL_IDX);
-          const {cells} = setup({...requiredProperties, columns});
-          const firstFrozenColumn = columns.filter(c => c.frozen === true)[0];
-          expect(cells.first().props().column).toBe(firstFrozenColumn);
-        });
       });
 
       describe('When not using frozen columns', ()  => {

themes/react-data-grid-cell.css

@@ -32,6 +32,15 @@
   box-shadow: 2px 0 5px -2px rgba(136, 136, 136, .3) !important;
 }
 
+/* cell which have tooltips need to have a higher z-index on hover so that the tooltip appears above the other cells*/
+.react-grid-Cell.has-tooltip:hover {
+  z-index: 5;
+}
+
+.react-grid-Cell.react-grid-Cell--frozen.has-tooltip:hover  {
+  z-index: 15;
+}
+
 .react-contextmenu--visible {
   z-index: 1000;
 }
@@ -90,16 +99,8 @@
   padding: 0;
 }
 
-.cell-tooltip {
-    position: relative;
-    display: inline-block;
-}
-
-.cell-tooltip:hover {
-  z-index: 101;
-}
-
 .cell-tooltip .cell-tooltip-text {
+    white-space: normal;
     visibility: hidden;
     width: 150px;
     background-color: black;
@@ -108,12 +109,11 @@
     border-radius: 6px;
     padding: 5px 0;
     position: absolute;
-    z-index: 1;
-    bottom: -150%;
+    top: 50%;
+    bottom: initial;
     left: 50%;
-    margin-left: -60px;
-    /* Fade in tooltip - takes 1 second to go from 0% to 100% opacity */
-    opacity: 1s;
+    margin-top: 15px;
+    margin-left: -75px
 }
 
 .cell-tooltip:hover .cell-tooltip-text {