Popover

Display a floating content panel that opens on click or hover. Unlike a tooltip, a popover can contain rich markup — links, lists, images, or custom HTML — not just a line of text. The trigger defaults to an information-circle icon; you can swap it for any other icon or for fully custom markup.

        
            <x-bladewind::popover>
                <p>This is the popover content. You can put <strong>any markup</strong> here.</p>
            </x-bladewind::popover>
        
    

Trigger Icon

The default trigger icon is information-circle (Heroicons). Pass any Heroicons name suffixed with -icon to the trigger attribute to swap it out.

        
            <x-bladewind::popover trigger="question-mark-circle-icon">...</x-bladewind::popover>
            <x-bladewind::popover trigger="bell-icon">...</x-bladewind::popover>
            <x-bladewind::popover trigger="ellipsis-vertical-icon">...</x-bladewind::popover>
        
    

Custom Trigger Markup

When an icon is not enough, pass any HTML as the trigger via <x-slot:trigger>. This lets you use a button, a badge, an avatar, or any other element as the popover trigger.

        
            <x-bladewind::popover>
                <x-slot:trigger>
                    <x-bladewind::button size="small" type="secondary">Options</x-bladewind::button>
                </x-slot:trigger>
                <ul class="space-y-2 text-sm">
                    <li><a href="#">Edit record</a></li>
                    <li><a href="#">Duplicate</a></li>
                    <li><a href="#">Delete</a></li>
                </ul>
            </x-bladewind::popover>
        
    

Title

An optional heading can be shown above the popover content by setting the title attribute. The title is separated from the content by a subtle border.

        
            <x-bladewind::popover title="Account Actions">
                <ul class="space-y-2 text-sm">
                    <li><a href="#">Edit profile</a></li>
                    <li><a href="#">Change password</a></li>
                    <li><a href="#">Sign out</a></li>
                </ul>
            </x-bladewind::popover>
        
    

Position

The popover panel can appear above, below, to the left, or to the right of its trigger. The default is bottom.

        
            <x-bladewind::popover position="top">...</x-bladewind::popover>
            <x-bladewind::popover position="bottom">...</x-bladewind::popover>
            <x-bladewind::popover position="left">...</x-bladewind::popover>
            <x-bladewind::popover position="right">...</x-bladewind::popover>
        
    

Trigger Event

By default the popover opens on click. Set trigger_on="mouseover" to open the panel when the user hovers over the trigger element instead.

        
            <x-bladewind::popover triggerOn="mouseover">
                <p>This popover opened on mouseover.</p>
            </x-bladewind::popover>
        
    

Width

The popover panel defaults to 280 pixels wide. Adjust the width attribute to suit your content — for example, wider panels for rich content like user cards.

        
            <x-bladewind::popover width="360" title="Wider popover">
                <p>This popover is 360px wide...</p>
            </x-bladewind::popover>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Popover component.

Popover with all attributes defined

        
            <x-bladewind::popover
                name="user-menu"
                trigger="ellipsis-vertical-icon"
                trigger_on="click"
                position="bottom"
                title="User Actions"
                width="300"
                class="rounded-lg">
                <ul class="space-y-2 text-sm">
                    <li><a href="#">Edit</a></li>
                    <li><a href="#">Delete</a></li>
                </ul>
            </x-bladewind::popover>