Tooltip long text are overflow

[ArjunKarki]

Description

if the placement is top right it should start from right and come to left, but currenttly half of the context is hide and go through the screen.

CodeSandbox/Snack link

No response

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

gluestack-ui Version

1.0.34

Platform

• [ ] Expo
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [ ] Android
• [ ] iOS

Other Platform

No response

Additional Information

No response

[rajat693]

hi @ArjunKarki, Thanks for reporting the issue. You can resolve this by giving the width to TooltipContent as mentioned below. <TooltipContent w={220}> {content} </TooltipContent>

[ArjunKarki]

Hi, @rajat693 I tried, still it is oveflow and go beyong the screen , My text is "This is the very very long long tooltip content text". I put placement to "top right"

[rajat693]

Could you please share the code with us, @ArjunKarki? This will help us better understand your issue and reproduce it more effectively.

[ArjunKarki]

 <Tooltip
                closeDelay={1000}
                placement="top right"
                isOpen={openTooltip}
                onClose={() => setOpenTooltip(false)}
                trigger={triggerProps => {
                  return (
                    <Pressable {...triggerProps} onPressIn={visibleTooltip}>
                      <HStack alignItems="center">
                        <IconButton
                          {...triggerProps}
                          helpCircleIcon
                          iconColor={'$gray900'}
                          pl={'$1'}
                          pr="$0"
                          onPressIn={visibleTooltip}
                          ref={null}
                        />
                      </HStack>
                    </Pressable>
                  );
                }}>
                <TooltipContent>
                  <TooltipText  fontSize="$tsm">
This is the very very long long tooltip content tex
                  </TooltipText>
                </TooltipContent>
              </Tooltip>
            )}

@rajat693 Here is the code that I applied, if the text is long, 60% of the tooltip is overflow and hidden as the SS shown above.