Tooltip Component Cut Off or Not Fully Visible When Hovering Truncated Text in FlatList

[eliyahu-kriel]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the issue

I encountered an issue while implementing a table using FlatList in react-native-web. When the text of an item is long and gets truncated, the tooltip component I created does not display properly when hovering over the first few elements in the list. The tooltip gets cut off or does not appear entirely.

on the last element - work great

you can see all the code in the sandbox

Expected behavior

The tooltip component should be displayed properly when hovering over the truncated text, regardless of the item's position in the list. The full text should be visible in the tooltip without any cutoff or display issues.

Steps to reproduce

1. Create a table-like structure using FlatList in react-native-web.
2. Include a tooltip component that shows the full text of a truncated item when hovered.
3. Populate the table with items where the text of one or more fields is long enough to be truncated.
4. Observe the behavior when hovering over the truncated text in the first few elements of the list.

Test case

https://codesandbox.io/s/loving-torvalds-d0mwdg?file=/src/App.js

Additional comments

• The issue seems to be related to the positioning or z-index of the tooltip component.

• I have tested the tooltip component separately and it works fine in other scenarios.

• I have verified that the truncation and hover functionality are implemented correctly.

• The problem occurs specifically when hovering over the first few elements of the list.

[necolas]

Overflow is hidden on almost all elements, so generally things like tooltips need to be rendered in a separate layer (like modals are) that can be positioned over the app.

[eliyahu-kriel]

but i want the tooltip will be on the exactly hovered element, how can i achieve it without complex calculations? if its in a separate layer i have to do some x,y calculations, isn't?

[alzalabany]

@eliyahu-kriel not really too complex; just pass parentElm to your tooltip; and use createPortal to escape dom

  const {x,y} = parentElm.getBoundingClientRect();
  return createPortal(
    <Pressable onPress={onClickOutside} style={[StyleSheet.absoluteFill, {backgroundColor: 'rgba(0,0,0,.5)'}]}>
        <div
        style={{
          top: y,
          left: x,
        }}>
           // .... your code
         </div>
    </Pressable>,
    document.body
  );