Popover

component

Free content anchored to a button: text, links or a small form, in a non-modal dialog that opens on click and closes on Escape, a click outside or when the focus leaves it.

Install

php bin/console ux:install popover \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies: assets/ → assets/
templates/ → templates/
Recipes: floating turbo
Composer: twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (3)

Default

Light

Dark

Code

<div class="flex min-h-72 items-start justify-center pt-6">
    <twig:Popover id="popover-dimensions" open placement="bottom-start">
        <twig:Popover:Trigger>
            <twig:Button variant="outline" {{ ...popover_trigger_attrs }}>Dimensions</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content class="w-80">
            <div class="grid gap-4">
                <div class="space-y-1">
                    <h4 class="font-medium text-heading">Dimensions</h4>
                    <p class="text-body">Set the dimensions for the layer.</p>
                </div>
                <div class="grid grid-cols-3 items-center gap-3">
                    <twig:Label for="popover-width">Width</twig:Label>
                    <twig:Input type="text" id="popover-width" value="100%" class="col-span-2" />
                    <twig:Label for="popover-height">Height</twig:Label>
                    <twig:Input type="text" id="popover-height" value="25px" class="col-span-2" />
                </div>
            </div>
        </twig:Popover:Content>
    </twig:Popover>
</div>

Placements

Light

Dark

Code

<div class="flex min-h-72 items-center justify-center gap-4">
    <twig:Popover id="popover-top" name="placements" placement="top">
        <twig:Popover:Trigger>
            <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Top</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content class="w-48">Above the trigger.</twig:Popover:Content>
    </twig:Popover>
    <twig:Popover id="popover-right" name="placements" placement="right" open>
        <twig:Popover:Trigger>
            <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Right</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content class="w-48">On the right of the trigger.</twig:Popover:Content>
    </twig:Popover>
</div>

A group

Light

Dark

Code

<div class="flex min-h-48 items-start justify-center gap-4 pt-6">
    <twig:Popover id="popover-owner" name="details">
        <twig:Popover:Trigger>
            <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Owner</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content class="w-56">Bonnie Green, since March.</twig:Popover:Content>
    </twig:Popover>
    <twig:Popover id="popover-status" name="details">
        <twig:Popover:Trigger>
            <twig:Button variant="outline" size="sm" {{ ...popover_trigger_attrs }}>Status</twig:Button>
        </twig:Popover:Trigger>
        <twig:Popover:Content class="w-56">Paid on 12 March.</twig:Popover:Content>
    </twig:Popover>
</div>