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>
        
    

Popovers In Scrolling Containers

The popover panel is positioned against its trigger rather than laid out inside it, so it is not cut off by whatever the trigger happens to sit in. This matters most in tables: a wide table needs a horizontally scrolling wrapper, and such a wrapper clips vertically as well, which used to swallow any popover opened from inside one.

Nothing is required of you. The panel keeps the side you asked for in position, flips vertically when the viewport cannot hold it on the requested side, and follows its trigger when you scroll. That applies when what scrolls is an inner container, not just the page itself.

Full List Of Attributes

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

JavaScript API

Each popover creates a BladewindPopover instance assigned to a variable named after the component's name, so it can be called directly from your own scripts or inline handlers. If you set name yourself, use only letters, numbers, and underscores, since hyphens are not valid in a JavaScript identifier. The auto-generated default already does this for you.

user_menu.show();
user_menu.hide();
user_menu.toggle();

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>