Popover - Laravel Blade

Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered over.

Default Popover

Blade code

<x-fwb.popover id="default-popover">
    <x-slot:triggerSlot>
        <x-fwb.button>Default popover</x-fwb.button>
    </x-slot:triggerSlot>
    <p>And here's some amazing content. It's very engaging. Right?</p>
</x-fwb.popover>

Popover with Title

Blade code

<x-fwb.popover id="title-popover">
    <x-slot:triggerSlot>
        <x-fwb.button>Popover with title</x-fwb.button>
    </x-slot:triggerSlot>
    <x-slot:title>Popover title</x-slot:title>
    <p>And here's some amazing content. It's very engaging. Right?</p>
</x-fwb.popover>

User Profile Popover

Jese Leos

Blade code

<x-fwb.popover id="user-popover" triggerType="hover">
    <x-slot:triggerSlot>
        <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline font-medium">Jese Leos</a>
    </x-slot:triggerSlot>
    <x-slot:title>Jese Leos</x-slot:title>
    <div class="flex items-center space-x-3">
        <div class="shrink-0">
            <img class="w-10 h-10 rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos">
        </div>
        <div>
            <p class="text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Full-stack developer</p>
        </div>
    </div>
    <p class="mt-3 text-sm">Open-source contributor. Building things for the web.</p>
    <div class="flex mt-3 space-x-4">
        <div>
            <span class="text-sm font-semibold text-gray-900 dark:text-white">127</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Following</span>
        </div>
        <div>
            <span class="text-sm font-semibold text-gray-900 dark:text-white">4,852</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Followers</span>
        </div>
    </div>
</x-fwb.popover>

Click Trigger

Blade code

<x-fwb.popover id="click-popover" triggerType="click">
    <x-slot:triggerSlot>
        <x-fwb.button>Click me</x-fwb.button>
    </x-slot:triggerSlot>
    <x-slot:title>Click Popover</x-slot:title>
    <p>This popover is shown when you click the button and hides when you click again.</p>
</x-fwb.popover>

Placement

Blade code

<div class="flex flex-wrap gap-4">
    <x-fwb.popover id="popover-top" placement="top">
        <x-slot:triggerSlot>
            <x-fwb.button>Popover top</x-fwb.button>
        </x-slot:triggerSlot>
        <x-slot:title>Popover top</x-slot:title>
        <p>This popover is displayed above the trigger element.</p>
    </x-fwb.popover>

    <x-fwb.popover id="popover-right" placement="right">
        <x-slot:triggerSlot>
            <x-fwb.button>Popover right</x-fwb.button>
        </x-slot:triggerSlot>
        <x-slot:title>Popover right</x-slot:title>
        <p>This popover is displayed to the right of the trigger element.</p>
    </x-fwb.popover>

    <x-fwb.popover id="popover-bottom" placement="bottom">
        <x-slot:triggerSlot>
            <x-fwb.button>Popover bottom</x-fwb.button>
        </x-slot:triggerSlot>
        <x-slot:title>Popover bottom</x-slot:title>
        <p>This popover is displayed below the trigger element.</p>
    </x-fwb.popover>

    <x-fwb.popover id="popover-left" placement="left">
        <x-slot:triggerSlot>
            <x-fwb.button>Popover left</x-fwb.button>
        </x-slot:triggerSlot>
        <x-slot:title>Popover left</x-slot:title>
        <p>This popover is displayed to the left of the trigger element.</p>
    </x-fwb.popover>
</div>

Description Popover

Due to its relatively low cost,

open-source
software enjoys many advantages over its proprietary counterpart.

Blade code

<p class="text-gray-500 dark:text-gray-400">
    Due to its relatively low cost, <x-fwb.popover id="desc-popover" placement="bottom" triggerType="hover">
        <x-slot:triggerSlot>
            <span class="text-blue-600 dark:text-blue-500 underline cursor-pointer">open-source</span>
        </x-slot:triggerSlot>
        <x-slot:title>What is open source?</x-slot:title>
        <p>Open source software is software with source code that anyone can inspect, modify, or enhance. Programs released under this license can be used at no cost.</p>
    </x-fwb.popover> software enjoys many advantages over its proprietary counterpart.
</p>

Popover without Arrow

Blade code

<x-fwb.popover id="no-arrow-popover" :arrow="false">
    <x-slot:triggerSlot>
        <x-fwb.button>Popover without arrow</x-fwb.button>
    </x-slot:triggerSlot>
    <x-slot:title>No Arrow</x-slot:title>
    <p>This popover does not have the pointer arrow element.</p>
</x-fwb.popover>

Component Properties

Popover x-fwb.popover

Prop Type Default Description
id string auto Unique identifier for the popover. Auto-generated if not provided.
placement string top Position of the popover relative to the trigger. Options: top, right, bottom, left.
triggerType string hover How the popover is triggered. Options: hover, click.
arrow bool true Show the pointer arrow on the popover.
offset int|null null Custom offset distance in pixels between the trigger and the popover.
triggerSlot slot - Named slot for the trigger element that activates the popover.
title slot - Named slot for the popover header/title with a distinct background.