[Question] Best practices for implementing tooltips

[iamdoron]

Hi,

I'm trying to use the table with cells that you can hover on them and see tooltips. Because of overflow/z-indexing issues I see my tooltips being clipped, and I see other issues with recycling of cells (for example, using https://github.com/wwayne/react-tooltip with a single <ReactTooltip /> wouldn't work out of the box).

[KamranAsif]

We've been struggling with this problem as well.
You don't want rows to overflow on top of one another, which is why rowsContainer has overflow set to hidden.

The solution is to have overflow disabled per cell, set rowsContainer to allow visible, and have classes for cells that have the tooltip.
You also need to bump the z-index of the hovered row

  .fixedDataTableLayout_rowsContainer {
    overflow: visible;
  }

  .fixedDataTableRowLayout_rowWrapper:hover {
      z-index: 10 !important;
  }

  .grid-cell {
    overflow: hidden;
  }

 .grid-cell.tooltip-open {
    overflow: visible
  } 

One glitch we encounter is our tooltip closing animation being cut off when the user moves to a different row. Because of cell recycling, theres no obvious solution here.

[vinayaknagpal]

Try using
https://react-bootstrap.github.io/components.html#tooltips
They position tooltips and overlays relative to body, it seems to work well with fixed-data-table

[KamranAsif]

Closing unless theres any follow up

[iamdoron]

@KamranAsif - I tried to use your method but it seemed a little bit too much (there are a lot of edge cases, and it felt too volatile). I decided to look for solutions where the tooltip element lives outside of the table, so you don't have to 'fight' the table via css and don't carry stuff on your back 🐫.

I used https://github.com/wwayne/react-tooltip, and it works pretty well - I had to fix some issues related to the fact the table uses transforms (ReactTooltip/react-tooltip#195) - it was a minor bug. But other than that - you just put the tooltip element outside the table and it makes your life much easier.

[KamranAsif]

Definitely the best approach. Thanks for the reply, I'm sure others will benefit!

[wcjordan]

A tooltip example using react-tooltip is now available here:
http://schrodinger.github.io/fixed-data-table-2/example-tooltip.html

[currentoor]

I've been trying to use react-tooltip with this table and I'm running into some issues. I can get the react-tooltip to work with other basic react components just fine, however it fails with this table for some reason.

In the example,

class TooltipCell extends React.PureComponent {
  render() {
    const {data, rowIndex, columnKey, ...props} = this.props;
    const value = data.getObjectAt(rowIndex)[columnKey];
    return (
      <Cell
        {...props}
        onMouseEnter={() => { ReactTooltip.show(); }}
        onMouseLeave={() => { ReactTooltip.hide(); }}>
        <div ref='valueDiv' data-tip={value}>
          {value}
        </div>
      </Cell>
    );
  }
};

Why were the show/hide methods needed? Also don't they require an argument?
https://github.com/wwayne/react-tooltip/blob/master/src/decorators/staticMethods.js#L43

[currentoor]

Also it looks like the example is broken. The first 15 rows have tooltips, but rows 16 to 27 do not have tool tips, even though from the code it looks like they are supposed. Could this have something to do with the DOM nodes being recycled.

But if I scroll to rows 16 to 27, then call ReactTooltip.rebuild() then they have tooltips as expected. Any suggestions for how to proceed? I suppose I could call ReactTooltip.rebuild() onScrollEnd.

[KamranAsif]

The example seems to work fine for me. You likely have a bug in your own code.
I suggest going to stackoverflow or ask for help on our discord channel

[currentoor]

@KamranAsif here's a gif of your tooltip example online, not my code. I suppose it could be something specific to my browser, but I doubt it.

AFAIK if you just scroll a have a page down the table, then the rows no longer have tooltips. So rows that do not fit into the initial render, NOT a specific number of rows.

Anyway this issue went away when I called ReactTooltip.rebuild() inside onScrollEnd.