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

🚀 Installation

npm install @theprojectsx/react-popover
# or
yarn add @theprojectsx/react-popover

---

💡 Usage

import Popover from "@theprojectsx/react-popover";

const Page = () => {
    return (
        <div>
            <Popover
                content={<p className="p-4">Here Lies some useful content</p>}
                position="bottom"
                axis="center"
            >
                <button className="px-5 py-2 rounded-2xl bg-neutral-200 cursor-pointer">
                    Click ME!
                </button>
            </Popover>
        </div>
    );
};

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