https://github.com/theprojectsx/react-popover
Single tool to use Popover and Tooltip in React
https://github.com/theprojectsx/react-popover
react react-dropdown react-popover react-tooltip
Last synced: 2 months ago
JSON representation
Single tool to use Popover and Tooltip in React
- Host: GitHub
- URL: https://github.com/theprojectsx/react-popover
- Owner: TheProjectsX
- Created: 2025-05-29T16:49:15.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-08-20T16:51:34.000Z (7 months ago)
- Last Synced: 2025-10-04T10:37:53.169Z (6 months ago)
- Topics: react, react-dropdown, react-popover, react-tooltip
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@theprojectsx/react-popover
- Size: 192 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Popover
A lightweight and flexible React Popover / Tooltip component.
- ⚡ **No ID or Ref needed** — just wrap and go!
- 🎨 **Full control** — no default styles applied to your content.
- 🧠 **Simple API** — intuitive props for easy customization.
---
## 🌐 Demo
Checkout [Demo of react-popover](https://modasser.is-a.dev/react-popover/)
## 🚀 Installation
```bash
npm install @theprojectsx/react-popover
# or
yarn add @theprojectsx/react-popover
```
---
## 💡 Usage
```jsx
import Popover from "@theprojectsx/react-popover";
const Page = () => {
return (
Here Lies some useful content}
position="bottom"
axis="center"
>
Click ME!
);
};
export default Page;
```
---
## ⚙️ Props
| Prop | Type | Default | Description |
| ----------------- | ---------------------------------------------------- | ---------- | ------------------------------------------------------------------ |
| `content` | `React.ReactNode` | — | Content to show inside the popover |
| `className` | `string` | — | Class for the content wrapper |
| `parentStyles` | `React.CSSProperties` | — | Inline styles for the parent element |
| `position` | `"top" \| "bottom" \| "left" \| "right"` | `"bottom"` | Where the popover appears relative to trigger |
| `axis` | `"center" \| "top" \| "bottom" \| "left" \| "right"` | `"center"` | Axis alignment of the popover |
| `triggerType` | `"auto" \| "manual"` | `"auto"` | Whether to trigger on interaction or control manually |
| `contentVisible` | `boolean` | `false` | Show/hide popover manually (used when `triggerType` is `"manual"`) |
| `viewOnHover` | `boolean` | `true` | Show popover on hover instead of click (only in `auto` mode) |
| `closeOnClick` | `boolean` | `true` | Close Popover when clicked in trigger |
| `onWrapperBlur` | `(e) => void` | — | Called when user clicks outside the popover |
| `onStatusChanged` | `(status: boolean) => void` | — | Called when Status of popover changes while `triggerType = auto` |
| `gap` | `number` | `10` | Used to decide the gap between trigger and content |
---
## 🧪 License
MIT © [@theprojectsx](https://github.com/theprojectsx)