Popover

Popover component for displaying contextual information or actions in an overlay

Basic Usage

The most basic popover with a trigger and overlay:

<neura::popover>
    <neura::popover.trigger>
        <neura::button>Click me</neura::button>
    </neura::popover.trigger>
    
    <neura::popover.overlay>
        <div class="p-4">
            <h4>Popover Title</h4>
            <p>Popover content</p>
        </div>
    </neura::popover.overlay>
</neura::popover>

On Hover

Activate the popover on hover with onHover="true":

Hover me

<neura::popover :onHover="true">
    <neura::popover.trigger>
        <span>Hover me</span>
    </neura::popover.trigger>
    
    <neura::popover.overlay>
        <div class="p-4">
            <p>Popover content</p>
        </div>
    </neura::popover.overlay>
</neura::popover>

Positions

Control the popover position with the position attribute:

<neura::popover.overlay position="top">...</neura::popover.overlay>
<neura::popover.overlay position="right">...</neura::popover.overlay>
<neura::popover.overlay position="bottom">...</neura::popover.overlay>
<neura::popover.overlay position="left">...</neura::popover.overlay>

Overlay Size

Adjust the overlay size with Tailwind classes. By default, the overlay uses w-fit (width adapted to content):

Match Button Width

Use the w-full class so the overlay takes exactly the same width as the trigger button:

<neura::popover.overlay class="w-full">
    <div class="p-4">
        Content that matches button width
    </div>
</neura::popover.overlay>

Fixed Width

Maximum Width

Full Width with Container

<!-- Fixed width -->
<neura::popover.overlay class="w-64">
    <div class="p-4">Content</div>
</neura::popover.overlay>

<!-- Maximum width -->
<neura::popover.overlay class="max-w-md">
    <div class="p-4">Content</div>
</neura::popover.overlay>

<!-- Larger width -->
<neura::popover.overlay class="w-96">
    <div class="p-4">Content</div>
</neura::popover.overlay>

Rich Content

The popover can contain any HTML content:

<neura::popover.overlay>
    <div class="p-4 max-w-xs">
        <h4>Title</h4>
        <p>Content</p>
        <div class="flex gap-2">
            <neura::button>Action</neura::button>
        </div>
    </div>
</neura::popover.overlay>

Use Cases

Information Tooltip

API Key

Action Menu

Best Practices

✓ Do

Use popovers for short contextual information
Use onHover for informative tooltips
Keep content concise and actionable
Choose the appropriate position based on available space

✗ Don't

Don't use popovers for very long content - use a modal instead
Don't create popovers that trigger on hover without a valid reason
Don't overload the interface with too many popovers
Don't use popovers for critical information

Properties

Popover Properties

Property	Type	Default	Description
onHover	bool	false	Open the popover on hover instead of click

Popover Overlay Properties

Property	Type	Default	Description
position	string	'bottom'	Popover position. Values: 'top', 'right', 'bottom', 'left'
offset	int	3	Spacing between trigger and popover (in Tailwind units)
class	string	''	Custom CSS classes. By default, the overlay uses w-fit. Use w-full to match the trigger button width, or w-64, w-96, max-w-md, etc. for other sizes