Popover

Popover component allows you to float a content panel anchored to another element, perfect for context menus, hover cards, tooltips, and much more.

Usage

To use the Popover, import it from your components and pass the required trigger and optional open, onOpenChange, side, sideOffset, align, alignOffset, arrowPadding, sticky, hideWhenDetached, avoidCollisions, enabled, and modal props.

Basic Popover

A simple popover that shows upon clicking the trigger element.

import React from "react";
import { Popover } from "@firecms/ui";

export default function PopoverBasicDemo() {
    return (
        <Popover
            trigger={<button className="btn">Open Popover</button>}
        >
            <div className="p-4">
                This is a basic Popover.
            </div>
        </Popover>
    );
}

Popover with Alignment

Showcasing how to align the popover content relative to the trigger element.

import React from "react";
import { Popover } from "@firecms/ui";

export default function PopoverAlignDemo() {
    return (
        <div>
            <Popover
                trigger={<button className="btn">Open Left</button>}
                side="left"
            >
                <div className="p-4">
                    Aligned to the left.
                </div>
            </Popover>
            <Popover
                trigger={<button className="btn ml-2">Open Bottom</button>}
                side="bottom"
            >
                <div className="p-4">
                    Aligned to the bottom.
                </div>
            </Popover>
        </div>
    );
}

Controlled Popover

Demonstrates the usage of open and onOpenChange props for controlled behavior.

import React, { useState } from "react";
import { Popover } from "@firecms/ui";

export default function PopoverControlledDemo() {
    const [open, setOpen] = useState(false);
    
    return (
        <Popover
            trigger={<button className="btn" onClick={() => setOpen(!open)}>Toggle Popover</button>}
            open={open}
            onOpenChange={setOpen}
        >
            <div className="p-4">
                This Popover's visibility is controlled externally.
            </div>
        </Popover>
    );
}

Usage with Custom Styling

Illustrating custom styling applied to the popover content.

import React from "react";
import { Popover } from "@firecms/ui";

export default function PopoverStyledDemo() {
    return (
        <Popover
            trigger={<button className="btn">Open Custom Styled Popover</button>}
            className="bg-purple-500 text-white p-3 rounded-lg shadow-lg"
        >
            <div>
                This Popover has custom styles applied.
            </div>
        </Popover>
    );
}