Popovers

The following popover component can be used for displaying some quick information as a pop-up upon some event like clicking a button or hovering a button. You can define JSX content via content and customzing the component is straightforward if needed via className.

Dependencies

No extra libraries required. Assuming you have Tailwind CSS installed

Usage

App.jsx

// App.jsx
import React, { useState } from 'react';
import Popover from './components/popover';

const App = () => {
  return (
    <div className="p-8">
      <Popover
        content={<div>This is the popover content!</div>}
        position="top" // Change to "bottom", "left", or "right" as needed
        className="text-blue-600"
      >
        <button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
          Hover or Click Me
        </button>
      </Popover>
    </div>
  );
}

export default App;

Component

popover.jsx

// Popover.jsx
import React, { useState } from 'react';

const Popover = ({ children, content, className = '', position = 'top' }) => {
  const [isOpen, setIsOpen] = useState(false);

  const togglePopover = () => {
    setIsOpen((prev) => !prev);
  };

  return (
    <div className="relative inline-block">
      <div onClick={togglePopover} className={`cursor-pointer ${className}`}>
        {children}
      </div>
      {isOpen && (
        <div
          className={`absolute z-10 p-4 bg-white border rounded shadow-lg transition-transform transform ${position === 'top' ? 'bottom-full mb-2' :
              position === 'bottom' ? 'top-full mt-2' :
                position === 'left' ? 'right-full mr-2' :
                  position === 'right' ? 'left-full ml-2' : ''
            }`}
        >
          {content}
          <button
            onClick={togglePopover}
            className="absolute top-2 right-2 text-gray-600 hover:text-gray-800"
          >
            &times;
          </button>
        </div>
      )}
    </div>
  );
};

export default Popover;