search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
83 stars 23 forks source link

Itwin Tooltip is not working for enableVirtualization #560

Closed vishal-shingare closed 2 years ago

vishal-shingare commented 2 years ago

Describe the bug (actual behavior)

When integrating Tooltip for Table cell and set enableVirtualization table property. Tooltip will work for the first-row cell only and not work for rest of the rows. But if we remove enableVirtualization table property. Then It will work for all the rows.

Expected behavior

ToolTip should work for all the rows image

Reproduction

Link to a minimal repro: https://stackblitz.com/edit/react-ts-fgcp1b?file=ITwinTable.tsx

Steps to reproduce
  1. Remove enableVirtualization table property.
  2. Hover on all the rows of the ProductName cell. ✅
  3. Set enableVirtualization table property.
  4. Hover on all the rows of the ProductName cell. ❌
veekeys commented 2 years ago

Hello @vishal-shingare

Thank you for the issue! Seems there is a problem with transform being used for virtualization and tippy.js calculations of transform value for tooltip. For now, the easy fix is adding this to the Tooltip: appendTo={document.body} It is documented also in our FAQ

This will be the default value pretty soon after we finalize testing.

vishal-shingare commented 2 years ago

Hi @veekeys, So it means we will get this fix on the next release?

veekeys commented 2 years ago

Hey @vishal-shingare, yes, next release should have this.

vishal-shingare commented 2 years ago

Thanks👍, @veekeys

mayank99 commented 2 years ago

@vishal-shingare This fix is now available in 1.32.0.