Popover Component Showcase

Introduction

The Popover component allows for versatile popover positioning and styling. Below are examples demonstrating different styles such as default, dark, and light, with both click and hover triggers.

Usage Examples

Default Popover (Click)

<Popover
  trigger={<button className="px-4 py-2 bg-blue-600 text-white rounded">Default Popover (Click)</button>}
  content={<div>Default Popover Content</div>}
  variant="default"
/>

Dark Popover (Hover)

<Popover
  trigger={<button className="px-4 py-2 bg-gray-800 text-white rounded">Dark Popover (Hover)</button>}
  content={<div>Dark Popover Content</div>}
  variant="dark"
  triggerOnHover={true}
/>

Light Popover (Click & Hover)

<Popover
  trigger={<button className="px-4 py-2 bg-gray-100 text-gray-800 rounded">Light Popover (Click & Hover)</button>}
  content={<div>Light Popover Content</div>}
  variant="light"
  triggerOnHover={true}
/>