Tooltip-Popover not visible on top of all the views when popover-Placement is RIGHT

[vaibhavs2]

onLongPress on emojis displaying toolTip-popOver when placement is TOP, LEFT, BOTTOM then all good, tooltips displaying correctly top of all emojis but problem is when the placement is RIGHT Look at the images below, the tooltip is visible but below the Imojis it should be on top.

Device/Setup Info:

• OS: Android 6
• react-native version: 0.63.4
  • react-native-popover-view version: ^3.1.1

Screenshots	Description	Image
when PopverPlacement is TOP
when PopverPlacement is RIGHT

Debug Output when toolTop is on right side

when toolTop is on left side

[SteffeyDev]

This is fascinating. However, it is probably something you can (and should) fix from your end. In TOOLTIP mode, the placement of the <Popover> in the hierarchy is important. If it is above an element in the JSX, it will show behind that element. If it is below an element, it will show on top of it. That is simply how JSX (and HTML) work, when no additional styles are applied. You can either adjust the placement of the <Popover> component, or use a zIndex in popoverStyle to force it to be displayed above other elements.

[SteffeyDev]

If you are still having trouble, share the bit of code that includes the Popover and I can probably point out the issue more clearly

[vaibhavs2]

EmojiWithTooltip.js	parent component

I tried zIndex but didn't fix it, may be due to FlatList all would have same zIndex, I dont know number of data for FlatList otherwise i would assign zIndex=maxNumber - index but doing so may create problem with left side TOOLTIP.

Its glad you added the PLACEMENT.AUTO in TOOLTIP and really very helful, but ToolTip when PLACEMENT.AUTO often placed right or left maximum time, I am assuming PLACEMENT.AUTO helps when there is no room on screen where TOOLTIPS can appear like here in the images if I click on right most emoji then TOOLTIP will appear left side and it should but the problem is when I click middle one then also TOOLTIP appears in right or left, shouldn't it be appears on top(upper side)?. Its very rare that AUTO placement suggests TOOLTIP to appear on top, most of the time its either left or right

[SteffeyDev]

We are discussing more flexible placement options and preferences (#96), so you may be interested in that. Right now, it prefers right and left to top and bottom, but that will soon be customizable.

As far as zIndex, can't you just set it to a high number (e.g. 1000) so that it always shows above other views?

[vaibhavs2]

yes , I saw somewhere in code there is default zIndex=1000 i tried with zIndex=2000 :smile: i tried zIndex even in style.emojiRow in EmojiWithTooltip.js and also tried as you said in popoverStyle Thank you #96 is great a enhancement , and would solve issue I have , many thanks to @SteffeyDev @RajRohitYadav

Edit:- there is some thing either I am doing or exists there is no effect of zIndex in popoverStyle , TOOLTIP on bottom also doesn't appear, surely Its due to zIndex I think emoji-component in the left mount first, and emojis in upper rows also mount first as the bottom and right one's are mounting later maybe that's why TOOTIP comes behind(lower layer) the emojis in the right and TOOLTIP in bottom do not even appears.

[SteffeyDev]

I've had difficulty with zIndex, but unfortunately that is outside of my control. You'd have to browse stack overflow and other React forums for how to make it work. React renders components and icons in the order they appear in the JSX, so the icons to the right and bottom of the <Popover> will render on top of the <Popover>.

I've designed the from prop to be very flexible, so you have a few options. You can pass a ref or rect into the from prop, and it will still anchor the popover to the icon. With that, you can put the list of <Popover>'s (or just a single popover if you only need one at a time) after the icon grid in the JSX, so that React will render it on top of all icons. See psuedocode:

<>
{emojis.map((emoji, i) => <Emoji {...emoji} ref={ref => setRef(ref, i)} onPress={() => showPopover(i)} />)}
{emojis.map((emoji, i) => <Popover from={refs[i]} visible={popoverVisible[i]}><Content /></Popover>)}
</>

[SteffeyDev]

Obviously zIndex would be the simplest and most elegant solution, but that is something outside the control of this library. I've provided the necessary props (popoverStyle) for you to work with. If you can't get it it working, you have workarounds available, as explained in last post.

[SteffeyDev]

Closing due to inactivity