I have a grid with in-cell editing & i have custom cells for each column. I am showing a tooltip on hover when there is a error in each cell. The default position of the tooltip is bottom. My requirement is only for the last row of the grid, i have to change the tooltip position on the top. Please help.
Display Tooltip position on the top for the last row in the grid.
0 Answers
39 Views
The Tooltip component has a position property that can be used to change the position, a possible approach I can suggest is to implement custom logic that checks whether the hover is on the last row and if it is set the `position` to top.
In case you are still encountering any issues with the implementation of the suggested approach can you please share a runnable example that reproduces the issue? This will allow me to debug it locally and find a suitable solution.
Regards,
Filip
Hi, Abhishek,
I am currently working on an example that will showcase a possible approach and I will get back to you once I am ready, thank you in advance for your patience
Regards,
Filip
Hi, Abhishek,
I have created an example that showcases one possible approach how to set the tooltip position to the top only for the last item:
https://stackblitz.com/edit/react-ma1hd8-pd8drb?file=app%2Fapp.tsx
The main idea is to set its position based on the id, please review it and let me know in case further assistance is required.
Regards,
Filip
Hi, Abhishek,
Thank you for the clarification, I understand that the requirement is to show the tooltip for the bottom row that is visible as opposed to the last one in the Grid, is that correct?
If this is the case this will require implementing custom logic that will detect the bottommost visible row, a possible approach is to use `getBoundingClientRect` to determine which row is currently visible on the bottom:
https://stackblitz.com/edit/react-ma1hd8-3iyc86?file=app%2Fapp.tsx
Regards,
Filip