On the web the tooltip and trigger component is rendered in the wrong place

[dannyhw]

When I run this on the web I have this issue

code: (im using nativewind so thats why I'm using classes)

 const [isVisible, toggle] = useReducer((state) => !state, false);

    const renderContent = useCallback(() => {
      return (
        <TouchableOpacity
          className="bg-surface-default px-4 py-2 rounded-2xl shadow-md"
          onPress={toggle}
        >
          <Text>Welcome to React Native Tooltiplize 🥳</Text>
        </TouchableOpacity>
      );
    }, []);

    return (
      <View className="flex-1 justify-center items-center">
        <Tooltip
          position="right"
          offset={8}
          renderContent={renderContent}
          isVisible={isVisible}
          withOverlay
          onDismiss={toggle}
          pointerStyle={{ width: 16, height: 8 }}
          pointerColor="white"
        >
          <Button onPress={toggle} text="Press Me"></Button>
        </Tooltip>
      </View>
    );
  },

works nicely on android and ios

[dannyhw]

I think its related to the styling of the outer container and I was able to find a way around it by just changing some of that so I'll close this. An outer container had padding that I guess threw off the calculation.