AsciiPopover

Contextual overlay components with ASCII styling for displaying additional information and actions.

Preview

Installation

npm install react-ascii-ui

Usage

import { AsciiPopover } from 'react-ascii-ui';

export default function App() {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <AsciiPopover
      content="Helpful information here!"
      position="top"
      trigger="click"
      visible={showPopover}
      onVisibilityChange={setShowPopover}
    >
      <button>Show Info</button>
    </AsciiPopover>
  );
}

Advanced Examples

API Reference

type Position = 'top' | 'bottom' | 'left' | 'right';
type Trigger = 'click' | 'hover';

Popover Features

• ✅ Multiple positioning options (top, bottom, left, right)
• ✅ Click and hover trigger modes
• ✅ Controlled and uncontrolled usage patterns
• ✅ Rich content support (text, HTML, React components)
• ✅ Auto-positioning to avoid viewport edges
• ✅ Customizable styling and arrow indicators
• ✅ Configurable delays and offsets
• ✅ Click outside to close functionality
• 🔄 Keyboard navigation and accessibility support (coming soon)
• 🔄 Portal rendering for z-index management (coming soon)