Comments (10)
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
.
from fixed-data-table-2.
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.
from fixed-data-table-2.
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
from fixed-data-table-2.
Closing unless theres any follow up
from fixed-data-table-2.
@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.
from fixed-data-table-2.
Definitely the best approach. Thanks for the reply, I'm sure others will benefit!
from fixed-data-table-2.
A tooltip example using react-tooltip is now available here:
http://schrodinger.github.io/fixed-data-table-2/example-tooltip.html
from fixed-data-table-2.
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
from fixed-data-table-2.
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
from fixed-data-table-2.
@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
.
from fixed-data-table-2.
Related Issues (20)
- Does it provide infinite scroll? HOT 1
- Resizable rows? HOT 5
- Need drop and play example HOT 3
- Sometimes when scrolling through table rows, I receive warning: Failed prop type: The prop `index` is marked as required in `FixedDataTableRowImpl`, but its value is `null`. HOT 4
- Check the column/cell visibility HOT 9
- Z-index 1 set on column header causes header to overlap other elements HOT 6
- Vertical scroll bar when we have many columns HOT 2
- Cannot read properties of null (reading 'onWheel') HOT 6
- Cannot read properties of null (reading 'setRoot') HOT 4
- React 18 question HOT 4
- "Global is not defined" in React Vite app HOT 2
- Error when refreshing data in table with "smaller" data HOT 5
- Is there a way to implement multi-level headers in Fixed Data Table 2 HOT 3
- When using variable row heights, setting `scrollTop` doesn't work well. Fix proposed HOT 4
- Resize line not shown when "maxHeight" is set. HOT 2
- Column resize doesn't properly work on mobile HOT 11
- Resize vertical bar public in header_ FixedDataTableColumnResizerLine_ Main positioning is not accurate HOT 4
- "site-dev-server" script doesn't work after upgrading to npm 9.8.0 HOT 4
- Scroll to an exact position when clicking the scrollbar track doesn't work in case of variable row heights and isVerticalScrollExact = true HOT 3
- Help with keeping scrollLeft property in components in each row when scrolling vertically. HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fixed-data-table-2.