Tooltip flickers, see attached video and snippet. Is the issue that I'm rendering a button as the trigger for tooltip? Seems like a basic implementation.
"@gluestack-ui/tooltip": "^0.1.30"
"@gluestack-ui/button": "^1.0.4"
<TableData>
{checkout.returned ?
<Tooltip
placement="top"
trigger={(triggerProps) => {
return (
<Button disabled={!returnDate} {...triggerProps} variant="link">
<ButtonIcon as={CheckCircle} color={colors.green[500]} />
</Button>
)
}}
>
<TooltipContent>
<TooltipText>{returnDate}</TooltipText>
</TooltipContent>
</Tooltip> :
isPending ?
<Spinner /> :
<Pressable onPress={() => returnContainer(checkout.container._id)}>
<Badge
size="sm"
action="info"
className="w-fit justify-center"
>
<BadgeText>Return</BadgeText>
</Badge>
</Pressable>
}
</TableData>