ReacUI
🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Popover

A floating card that displays contextual information triggered by a click

Installation

The Popover component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Popover component into your React component.

import { Popover } from 'reacui';

Basic Popover

A basic popover that displays when clicked and closes when clicked again.

import { useState } from 'react';
import { Popover } from 'reacui';

function Example() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Popover
      isOpen={isOpen}
      onOpenChange={setIsOpen}
      trigger={
        <button>Click me</button>
      }
      content={
        <>
          <Popover.Header>Popover Title</Popover.Header>
          <Popover.Body>
            This is the popover content with some useful information.
          </Popover.Body>
          <Popover.Footer>
            <button onClick={() => setIsOpen(false)}>
              Dismiss
            </button>
          </Popover.Footer>
        </>
      }
    />
  );
}

Popover Positioning

Popovers can be positioned in different directions: top, right, bottom, or left.

import { Popover } from 'reacui';

function Example() {
  return (
    <>
      <Popover
        placement="top"
        trigger={<button>Top</button>}
        content="Popover on top"
      />
      
      <Popover
        placement="right"
        trigger={<button>Right</button>}
        content="Popover on right"
      />
      
      <Popover
        placement="bottom"
        trigger={<button>Bottom</button>}
        content="Popover on bottom"
      />
      
      <Popover
        placement="left"
        trigger={<button>Left</button>}
        content="Popover on left"
      />
    </>
  );
}

Trigger Options

Popovers can be triggered by click, hover, or focus events.

Click trigger (default)
Hover trigger
Focus trigger
import { Popover } from 'reacui';

function Example() {
  return (
    <>
      <Popover
        trigger={<button>Click me</button>}
        triggerType="click"
        content="Appears on click"
      />
      
      <Popover
        trigger={<button>Hover me</button>}
        triggerType="hover"
        content="Appears on hover"
      />
      
      <Popover
        trigger={<input type="text" placeholder="Focus me" />}
        triggerType="focus"
        content="Appears on focus"
      />
    </>
  );
}

Customization

Customize the popover with different styles and content.

import { Popover } from 'reacui';

function Example() {
  return (
    <Popover
      className="bg-gradient-to-r from-green-50 to-teal-50 border-green-200 w-72"
      trigger={
        <button className="bg-gradient-to-r from-green-500 to-teal-600">
          Custom Popover
        </button>
      }
      content={
        <>
          <div className="flex items-center mb-3">
            <div className="bg-green-100 p-2 rounded-full">
              <HandIcon className="h-6 w-6 text-green-600" />
            </div>
            <h3 className="ml-3 text-lg font-medium">Custom Styled Popover</h3>
          </div>
          <p className="text-sm">
            This popover has a custom design with gradient background and styled content.
          </p>
          <div className="mt-4 pt-3 border-t border-green-200">
            <a href="#" className="text-sm text-green-600 font-medium">
              Learn more about customization →
            </a>
          </div>
        </>
      }
      closeButton
    />
  );
}

API Reference

The following props are available for the Popover component.

ComponentPropTypeDefaultDescription
PopovertriggerReactNoderequiredThe element that triggers the popover.
contentReactNoderequiredThe content to display inside the popover.
isOpenboolean-Controls the open state when using as a controlled component.
onOpenChangefunction-Callback function when the popover open state changes.
placementstring'bottom'Placement of the popover: 'top', 'right', 'bottom', 'left'
triggerTypestring'click'How to trigger the popover: 'click', 'hover', 'focus'
offsetnumber8Distance between trigger and popover in pixels.
closeButtonbooleanfalseWhether to show a close button in the popover.
classNamestring''Additional CSS classes for the popover.
Popover.HeaderclassNamestring''Additional CSS classes for the popover header.
Popover.BodyclassNamestring''Additional CSS classes for the popover body.
Popover.FooterclassNamestring''Additional CSS classes for the popover footer.