Skip to Content
Dashflow Logo

Popover Component

A comprehensive guide to using the Popover component with examples, props, and best practices.

Overview

The Popover component is a floating panel that appears when triggered by a user action. It's commonly used for displaying additional content, forms, or actions without navigating away from the current page.

Basic Usage

import { Popover } from '@dashflowx/core'


export default function PopoverExample() {
  return (
    <Popover 
      popoverTrigger={<button>Open Popover</button>}
      popoverContent={<div>This is popover content</div>}
    />
  )
}

Preview:

Open Popover
This is popover content

Props

PropTypeDefaultDescription
popoverTriggerJSX.Element-The element that triggers the popover
popoverContentJSX.Element-The content to display in the popover
triggerClassNamestring''Additional CSS classes for the trigger
contentClassNamestring''Additional CSS classes for the content
alignstring'center'The alignment of the popover
sideOffsetnumber4The offset from the trigger element

Examples

Basic Popover

<Popover 
  popoverTrigger={<button>Open Popover</button>}
  popoverContent={<div>Basic popover content</div>}
/>

Preview:

Open Popover
Basic popover content

Popover with Rich Content

<Popover 
  popoverTrigger={<button>User Menu</button>}
  popoverContent={
    <div className="space-y-2">
      <h3 className="font-semibold">User Options</h3>
      <button className="block w-full text-left px-2 py-1 hover:bg-gray-100">
        Profile
      </button>
      <button className="block w-full text-left px-2 py-1 hover:bg-gray-100">
        Settings
      </button>
      <button className="block w-full text-left px-2 py-1 hover:bg-gray-100">
        Logout
      </button>
    </div>
  }
/>

Preview:

User Menu
User Options: Profile, Settings, Logout

Custom Styled Popover

<Popover 
  popoverTrigger={<button className="bg-green-500 hover:bg-green-600">Custom Style</button>}
  popoverContent={
    <div className="bg-green-50 border border-green-200">
      <p className="text-green-800">Custom styled popover content</p>
    </div>
  }
  contentClassName="bg-green-50 border-green-200"
/>

Preview:

Custom Style
Custom styled popover content

Form Popover

<Popover 
  popoverTrigger={<button>Quick Add</button>}
  popoverContent={
    <form className="space-y-3">
      <div>
        <label className="block text-sm font-medium">Name</label>
        <input type="text" className="w-full border rounded px-2 py-1" />
      </div>
      <div>
        <label className="block text-sm font-medium">Email</label>
        <input type="email" className="w-full border rounded px-2 py-1" />
      </div>
      <div className="flex space-x-2">
        <button className="px-3 py-1 bg-blue-500 text-white rounded">Save</button>
        <button className="px-3 py-1 bg-gray-300 rounded">Cancel</button>
      </div>
    </form>
  }
/>

Preview:

Quick Add
Form: Name, Email, Save/Cancel buttons

Common Use Cases

User Menu

<Popover 
  popoverTrigger={
    <div className="flex items-center space-x-2 cursor-pointer">
      <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white">
        JD
      </div>
      <span>John Doe</span>
    </div>
  }
  popoverContent={
    <div className="space-y-1">
      <button className="block w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        View Profile
      </button>
      <button className="block w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        Account Settings
      </button>
      <button className="block w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        Billing
      </button>
      <hr className="my-1" />
      <button className="block w-full text-left px-3 py-2 hover:bg-gray-100 rounded text-red-600">
        Sign Out
      </button>
    </div>
  }
/>

Filter Options

<Popover 
  popoverTrigger={<button>Filter</button>}
  popoverContent={
    <div className="space-y-3">
      <h3 className="font-semibold">Filter Options</h3>
      <div>
        <label className="block text-sm font-medium mb-1">Category</label>
        <select className="w-full border rounded px-2 py-1">
          <option>All Categories</option>
          <option>Technology</option>
          <option>Design</option>
          <option>Business</option>
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1">Date Range</label>
        <input type="date" className="w-full border rounded px-2 py-1" />
      </div>
      <div className="flex space-x-2">
        <button className="px-3 py-1 bg-blue-500 text-white rounded">Apply</button>
        <button className="px-3 py-1 bg-gray-300 rounded">Clear</button>
      </div>
    </div>
  }
/>

Quick Actions

<Popover 
  popoverTrigger={<button>Actions</button>}
  popoverContent={
    <div className="space-y-1">
      <button className="flex items-center space-x-2 w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        <span>📝</span>
        <span>Edit</span>
      </button>
      <button className="flex items-center space-x-2 w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        <span>📋</span>
        <span>Duplicate</span>
      </button>
      <button className="flex items-center space-x-2 w-full text-left px-3 py-2 hover:bg-gray-100 rounded">
        <span>🔗</span>
        <span>Share</span>
      </button>
      <hr className="my-1" />
      <button className="flex items-center space-x-2 w-full text-left px-3 py-2 hover:bg-gray-100 rounded text-red-600">
        <span>🗑️</span>
        <span>Delete</span>
      </button>
    </div>
  }
/>

Information Panel

<Popover 
  popoverTrigger={<span className="text-blue-500 cursor-help">ℹ️</span>}
  popoverContent={
    <div className="max-w-sm">
      <h3 className="font-semibold mb-2">Feature Information</h3>
      <p className="text-sm text-gray-600 mb-3">
        This feature allows you to manage your content more efficiently.
      </p>
      <div className="text-xs text-gray-500">
        <p>• Available in all plans</p>
        <p>• No setup required</p>
        <p>• 24/7 support included</p>
      </div>
    </div>
  }
/>

Best Practices

1. Clear Trigger Elements

Use clear and intuitive trigger elements.

// ✅ Good - Clear trigger
<Popover 
  popoverTrigger={<button>User Menu</button>}
  popoverContent={userMenuContent}
/>


// ✅ Good - Icon with label
<Popover 
  popoverTrigger={
    <div className="flex items-center space-x-1">
      <span>⚙️</span>
      <span>Settings</span>
    </div>
  }
  popoverContent={settingsContent}
/>

2. Appropriate Content Size

Keep popover content appropriately sized.

// ✅ Good - Appropriate size
<Popover 
  popoverContent={
    <div className="w-64">
      <h3>Menu Title</h3>
      <p>Menu content</p>
    </div>
  }
/>


// ❌ Avoid - Too large
<Popover 
  popoverContent={
    <div className="w-96 h-96">
      {/* Very large content */}
    </div>
  }
/>

3. Consistent Styling

Use consistent styling throughout your application.

// ✅ Good - Consistent styling
<Popover 
  popoverTrigger={<button className="btn-primary">Action</button>}
  popoverContent={
    <div className="popover-content">
      {/* Content */}
    </div>
  }
/>

4. Accessibility

Ensure popovers are accessible to all users.

// ✅ Good - Accessible popover
<Popover 
  popoverTrigger={
    <button aria-expanded="false" aria-haspopup="true">
      Menu
    </button>
  }
  popoverContent={
    <div role="menu">
      {/* Menu items */}
    </div>
  }
/>

5. Logical Content Organization

Organize popover content logically.

// ✅ Good - Logical organization
<Popover 
  popoverContent={
    <div className="space-y-3">
      <h3 className="font-semibold">Settings</h3>
      <div className="space-y-2">
        <div>Setting 1</div>
        <div>Setting 2</div>
      </div>
      <div className="pt-2 border-t">
        <button>Save Changes</button>
      </div>
    </div>
  }
/>

Customization

Custom Styling

You can customize the popover appearance using CSS classes:

<Popover 
  popoverTrigger={<button>Custom</button>}
  popoverContent={<div>Custom content</div>}
  contentClassName="bg-purple-50 border-purple-200 rounded-xl"
/>

Different Sizes

Use different sizes for different content types:

// Small popover
<Popover 
  popoverContent={<div>Small content</div>}
  contentClassName="w-48"
/>


// Large popover
<Popover 
  popoverContent={<div>Large content</div>}
  contentClassName="w-96"
/>

Custom Positioning

Use custom positioning for specific layouts:

<Popover 
  popoverContent={<div>Content</div>}
  align="start"
  sideOffset={8}
/>

Advanced Usage

Controlled Popover

Create controlled popovers with state management:

const [isOpen, setIsOpen] = useState(false);


return (
  <Popover 
    popoverTrigger={
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Popover
      </button>
    }
    popoverContent={
      <div>
        <p>Controlled popover content</p>
        <button onClick={() => setIsOpen(false)}>
          Close
        </button>
      </div>
    }
  />
);

Dynamic Content

Use dynamic content in popovers:

<Popover 
  popoverTrigger={<button>Dynamic Content</button>}
  popoverContent={
    <div>
      <h3>Current Time</h3>
      <p>{new Date().toLocaleString()}</p>
    </div>
  }
/>

Multiple Popovers

Use multiple popovers in a single component:

<div className="flex space-x-4">
  <Popover 
    popoverTrigger={<button>Menu 1</button>}
    popoverContent={<div>Menu 1 content</div>}
  />
  <Popover 
    popoverTrigger={<button>Menu 2</button>}
    popoverContent={<div>Menu 2 content</div>}
  />
</div>
  • Tooltip: For simple hover information
  • Modal: For full-screen overlays
  • Dropdown: For select menus
  • Menu: For navigation menus
  • Dialog: For modal dialogs

API Reference

For the complete API reference and advanced usage patterns, see the Popover API documentation.

Edit this page on GitHub
previousHover Card