PopOver

The PopOver component provides a flexible way to display content in a floating panel that appears when triggered. It supports various content types, positioning, and accessibility features.

Import

import { PopOver, PopOverTrigger, PopOverContent } from 'h2o-library';

Basic Usage

Basic PopOver

<PopOver isOpen={isOpen} setIsOpen={setIsOpen}>
  <PopOverTrigger>
    <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      Click me
    </button>
  </PopOverTrigger>
  <PopOverContent>
    <div className="p-4 bg-white border rounded-lg shadow-lg">
      <h4 className="font-semibold mb-2">PopOver Content</h4>
      <p>This is a basic popover with some content.</p>
    </div>
  </PopOverContent>
</PopOver>

PopOver with Form

<PopOver isOpen={isOpen} setIsOpen={setIsOpen}>
  <PopOverTrigger>
    <button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
      Edit Profile
    </button>
  </PopOverTrigger>
  <PopOverContent>
    <div className="p-4 bg-white border rounded-lg shadow-lg w-80">
      <h4 className="font-semibold mb-4">Edit Profile</h4>
      <form className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-1">Name</label>
          <input
            type="text"
            className="w-full px-3 py-2 border rounded"
            placeholder="Enter your name"
          />
        </div>
        <div>
          <label className="block text-sm font-medium mb-1">Email</label>
          <input
            type="email"
            className="w-full px-3 py-2 border rounded"
            placeholder="Enter your email"
          />
        </div>
        <div className="flex justify-end gap-2">
          <button
            type="button"
            onClick={() => setIsOpen(false)}
            className="px-3 py-1 text-gray-600 hover:text-gray-800"
          >
            Cancel
          </button>
          <button
            type="submit"
            className="px-3 py-1 bg-green-500 text-white rounded hover:bg-green-600"
          >
            Save
          </button>
        </div>
      </form>
    </div>
  </PopOverContent>
</PopOver>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

PopOver

Prop	Type	Default	Description
isOpen	boolean	-	Controls the visibility of the popover
setIsOpen	(isOpen: boolean) => void	-	Function to update the popover visibility
children	React.ReactNode	-	The content of the popover

PopOverTrigger

Prop	Type	Default	Description
children	React.ReactNode	-	The element that triggers the popover

PopOverContent

Prop	Type	Default	Description
children	React.ReactNode	-	The content to display in the popover

Design Considerations

• Clear visual hierarchy
• Proper positioning
• Smooth transitions
• Support for rich content
• Custom styling options
• Responsive design
• Clear visual feedback
• Proper touch targets
• Content alignment
• Support for different contexts
• Proper spacing
• Consistent styling

Accessibility

• Proper ARIA attributes
• Screen reader support
• Clear visual indicators
• Proper contrast ratios
• Support for reduced motion
• Touch target sizes
• Keyboard navigation
• Focus management
• Color contrast
• Text alternatives
• State announcements
• Error handling
• Focus restoration
• Touch device support
• Screen reader announcements