🧭 React Native Tooltip

A lightweight, customizable, and dependency-free Tooltip component for React Native, built with TypeScript.
Show contextual information when users interact with any element in your app — supports multiple positions, custom styling, and titles.

---

📦 Installation

Install via npm or yarn:

npm install @dinindupeiris99/react-native-tooltip
# or
yarn add @dinindupeiris99/react-native-tooltip

🚀 Usage

Here’s a simple example showing how to use the tooltip in your React Native project:

import React from "react";
import { View } from "react-native";
import Tooltip from "@dinindupeiris99/react-native-tooltip";

const App = () => {
  return (
    <View>
      <Tooltip
        title="Info"
        content="This is a helpful tooltip!"
        position="top"
        width={200}
      >
        <Text>Press me</Text>
      </Tooltip>
    </View>
  );
};

export default App;

⚙️ Props

Prop	Type	Default	Description
title	string	undefined	Optional title displayed above the tooltip content.
content	string	Required	Main tooltip text.
titleStyle	StyleProp<TextStyle>	undefined	Custom styles for the title text.
textStyle	StyleProp<TextStyle>	undefined	Custom styles for the content text.
width	number	undefined	Fixed tooltip width.
maxWidth	number	undefined	Maximum tooltip width.
position	"top" | "bottom" | "left" | "right"	"top"	Where the tooltip should appear relative to the target.
style	StyleProp<ViewStyle>	undefined	Container style for the tooltip wrapper.
children	React.ReactNode	Required	Element that triggers the tooltip on press.

🧠 Features

✅ No external dependencies ✅ Lightweight and easy to integrate ✅ Customizable styles for title and content ✅ Four positions: top, bottom, left, right ✅ Simple press-to-toggle visibility ✅ Cross-platform (iOS, Android)

🎨 Example Preview

Here’s how the tooltip appears for different positions:

Position	Description
Top	Appears above the target element
Bottom	Appears below the target element
Left	Appears to the left of the target element
Right	Appears to the right of the target element

🧩 Styling

The component includes sensible defaults, but you can override styles easily:

<Tooltip
  title="Notice"
  content="You can style this text!"
  titleStyle={{ color: "red", fontWeight: "600" }}
  textStyle={{ color: "gray" }}
  position="bottom"
>
  <Text style={{ color: "blue" }}>Custom Styled Tooltip</Text>
</Tooltip>

🧱 Built With

⚛️ React Native 💪 TypeScript

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request on GitHub.

📄 License

MIT © Dinindu Peiris

🌟 Support

If you like this package, please consider giving it a ⭐ on npm or GitHub !