Use TooltipTrigger instead of OverlayTrigger in Table plugin

Signed-off-by: Ming Xiao <mxiao@pivotal.io>
pivotal-cf · Jul 13, 2018 · b224729 · b224729
1 parent f1547b8
commit b224729
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 16 deletions.
diff --git a/spec/pivotal-ui-react/table/plugins/cell-tooltip_spec.js b/spec/pivotal-ui-react/table/plugins/cell-tooltip_spec.js
@@ -34,8 +34,10 @@ describe('withCellTooltip', () => {
     expect(tooltip).toHaveBeenCalledWith({isHeader: false}, data[1]);
   });
 
-  it('does not render a tooltip', () => {
-    expect('.tooltip').not.toExist();
+  it('renders a hidden tooltip', () => {
+    expect('thead tr:eq(0) th:eq(0) .tooltip .tooltip-container').toHaveClass('tooltip-container-hidden');
+    expect('tbody tr:eq(0) td:eq(0) .tooltip .tooltip-container').toHaveClass('tooltip-container-hidden');
+    expect('tbody tr:eq(1) td:eq(0) .tooltip .tooltip-container').toHaveClass('tooltip-container-hidden');
   });
 
   it('renders an Icon for the first header', () => {
@@ -52,29 +54,30 @@ describe('withCellTooltip', () => {
 
   describe('when hovering the first header', () => {
     beforeEach(() => {
-      $('th:eq(0) .overlay-trigger').simulate('mouseOver');
+      $('tr:eq(0) th:eq(0) .tooltip').simulate('mouseOver');
     });
 
     afterEach(() => {
-      $('th:eq(0) .overlay-trigger').simulate('mouseOut');
+      $('tr:eq(0) th:eq(0) .tooltip').simulate('mouseOut');
     });
 
     it('renders a tooltip', () => {
-      expect('.tooltip').toHaveText('is header? true');
+      expect('thead th:eq(0) .tooltip .tooltip-container').toHaveClass('tooltip-container-visible');
+      expect('thead th:eq(0) .tooltip-content').toHaveText('is header? true');
     });
   });
 
   describe('when hovering the first body row first column', () => {
     beforeEach(() => {
-      $('tr:eq(1) td:eq(0) .overlay-trigger').simulate('mouseOver');
+      $('tr:eq(1) td:eq(0) .tooltip').simulate('mouseOver');
     });
 
     afterEach(() => {
-      $('tr:eq(1) td:eq(0) .overlay-trigger').simulate('mouseOut');
+      $('tr:eq(1) td:eq(0) .tooltip').simulate('mouseOut');
     });
 
     it('renders a tooltip', () => {
-      expect('.tooltip').toHaveText('is header? false');
+      expect('tr:eq(1) td:eq(0) .tooltip-content').toHaveText('is header? false');
     });
   });
 });
diff --git a/src/react/table/plugins/cell-tooltip.js b/src/react/table/plugins/cell-tooltip.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react';
-import {Tooltip} from '../../tooltip';
-import {OverlayTrigger} from '../../overlay-trigger';
+import {TooltipTrigger} from '../../tooltip';
 import {Icon} from '../../iconography';
 
 import {TablePlugin} from '../table-plugin';
@@ -14,22 +13,23 @@ export function withCellTooltip(Table) {
     const {text, size, theme, showIcon} = tooltip({isHeader}, rowDatum) || {};
     if (!text) return;
 
-    const overlay = (<Tooltip {...{size}}>{text}</Tooltip>);
     const children = (
-      <OverlayTrigger {...{
+      <TooltipTrigger {...{
         placement: 'top',
-        overlay,
-        theme
+        tooltip: text,
+        theme,
+        size,
+        trigger: 'hover'
       }}>
-        <span className="overlay-trigger">
+        <span>
           <span>{oldChildren}</span>
           {showIcon && <Icon {...{
             src: 'info_outline',
             verticalAlign: 'baseline',
             className: 'mlm'
           }}/>}
         </span>
-      </OverlayTrigger>
+      </TooltipTrigger>
     );
 
     return {children};