universal-tooltip

Works on all platforms, Example project here.

iOS	Android	Web

What

This is a pure and simple native tooltip component that supports fadeIn and zoomIn preset animations.

🍎 On iOS:

• This component is written in Swift and wraps Popovers.

🤖️ On Android:

• This component is written in Kotlin and wraps the excellent library - Balloon.

🌐 On Web:

• This component wraps @radix-ui/react-popover for mobile use.

• This component wraps @radix-ui/react-tooltip for desktop use.

Please note that the @radix-ui/react-tooltip component from Radix only works on desktop, as per this thread.

Usage

import { useState } from "react";
import * as Tooltip from "universal-tooltip";
import { Text, View, Pressable, Platform } from "react-native";

// because each platform has different behaviors, but you can replace the components yourself, of course.
const TriggerView = Platform.OS === "web" ? View : Pressable;

const [open, setOpen] = useState(false);

<Tooltip.Root
  // For web, I would like to be triggered automatically with the mouse.
  {...Platform.select({
    web: {},
    default: {
      open,
      onDismiss: () => {
        console.log("onDismiss");
        setOpen(false);
      },
    },
  })}
>
  <Tooltip.Trigger>
    <TriggerView
      {...Platform.select({
        web: {},
        default: {
          open,
          onPress: () => {
            setOpen(true);
          },
        },
      })}
    >
      <Text>Hello!👋</Text>
    </TriggerView>
  </Tooltip.Trigger>
  <Tooltip.Content
    sideOffset={3}
    containerStyle={{
      paddingLeft: 16,
      paddingRight: 16,
      paddingTop: 8,
      paddingBottom: 8,
    }}
    onTap={() => {
      setOpen(false);
      console.log("onTap");
    }}
    dismissDuration={500}
    disableTapToDismiss
    side="right"
    presetAnimation="fadeIn"
    backgroundColor="black"
    borderRadius={12}
  >
    <Tooltip.Text text="Some copy..." style={{ color: "#000", fontSize: 16 }} />
  </Tooltip.Content>
</Tooltip.Root>;

API

This component's API basically same as the @radix-ui/react-tooltip component, but there are some differences on native.

Installation

yarn add universal-tooltip

Expo

expo install universal-tooltip expo-build-properties

To use this component, you need to add the expo-build-properties plugin to your app.json or app.config.js and ensure that your compileSdkVersion >= 32 as required by the Ballon lib. An example configuration might look like this:

[
  "expo-build-properties",
  {
    "android": {
      "compileSdkVersion": 32,
      "targetSdkVersion": 32,
      "minSdkVersion": 23,
      "buildToolsVersion": "32.0.0",
      "kotlinVersion": "1.6.10"
    },
    "ios": {
      "deploymentTarget": "13.0"
    }
  }
]

License

MIT