Popover

Displays rich content in a portal, triggered by a button.

Component Code 
<april:popover x-teleport="body">
    <slot:trigger>
        <april:button variant="outline">Open popover</april:button>
    </slot:trigger>
    <slot:content class="w-80">
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="width">Width</april:label>
                    <april:input id="width" value="100%" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="maxWidth">Max. width</april:label>
                    <april:input id="maxWidth" value="300px" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="height">Height</april:label>
                    <april:input id="height" value="25px" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="maxHeight">Max. height</april:label>
                    <april:input id="maxHeight" value="none" class="col-span-2 h-8" />
                </div>
            </div>
        </div>
    </slot:content>
</april:popover>

Use the generic trigger and content slots. The older popover-trigger and popover-content names remain supported.

Breaking out of parent context

To avoid Z-Index and other bizarre CSS issues, the popover component supports x-teleport provided by Alpine, you however do not need to wrap the dialog in a template element.

Component Code 
<april:popover x-teleport="body">
    <slot:trigger>
        <april:button variant="outline">Open popover</april:button>
    </slot:trigger>
    <slot:content class="w-80">
        <div class="grid gap-4">
            <div class="space-y-2">
                <h4 class="font-medium leading-none">Dimensions</h4>
                <p class="text-sm text-muted-foreground">
                    Set the dimensions for the layer.
                </p>
            </div>
            <div class="grid gap-2">
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="width-2">Width</april:label>
                    <april:input id="width-2" value="100%" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="maxWidth-2">Max. width</april:label>
                    <april:input id="maxWidth-2" value="300px" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="height-2">Height</april:label>
                    <april:input id="height-2" value="25px" class="col-span-2 h-8" />
                </div>
                <div class="grid grid-cols-3 items-center gap-4">
                    <april:label for="maxHeight-2">Max. height</april:label>
                    <april:input id="maxHeight-2" value="none" class="col-span-2 h-8" />
                </div>
            </div>
        </div>
    </slot:content>
</april:popover>

Publishing Views

Use the following command to publish this view:

php artisan april:publish popover
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.