# Popover

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

- Install: `php artisan blatui:add popover`
- Source: https://blatui.remix-it.com/r/popover.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`
- npm: `npm install -D @alpinejs/anchor @alpinejs/focus`

## resources/views/components/ui/popover.blade.php

```blade
<div data-slot="popover" x-data="{ open: false }" x-id="['blat-popover']" {{ $attributes->twMerge('relative inline-block') }}>
    {{ $slot }}
</div>
```

## resources/views/components/ui/popover-content.blade.php

```blade
@props([
    'align' => 'center',
    'side' => 'bottom',
    'sideOffset' => 4,
    'label' => 'Popover',
])

@php
    $placement = $side.($align === 'center' ? '' : '-'.$align);
    $anchorAttr = 'x-anchor.fixed.'.$placement.'.offset.'.$sideOffset.'="$refs.trigger"';
@endphp

<template x-teleport="body" wire:ignore>
    <div
        x-blat-dialog-layer
        x-show="open"
        x-cloak
        {!! $anchorAttr !!}
        @click.outside="open = false"
        @keydown.escape.window="open = false"
        x-trap="open"
        :id="$id('blat-popover')"
        role="dialog"
        aria-label="{{ $label }}"
        tabindex="-1"
        data-slot="popover-content"
        data-side="{{ $side }}"
        :data-state="open ? 'open' : 'closed'"
        x-transition:enter="transition ease-out duration-150"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-100"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        {{ $attributes->twMerge('bg-popover text-popover-foreground fixed z-50 w-72 origin-top rounded-md border p-4 shadow-md outline-hidden') }}
    >
        {{ $slot }}
    </div>
</template>
```

## resources/views/components/ui/popover-trigger.blade.php

```blade
<span
    x-ref="trigger"
    @click="open = !open"
    x-blat-trigger="{ haspopup: 'dialog', controls: $id('blat-popover') }"
    data-slot="popover-trigger"
    {{ $attributes->twMerge('inline-block') }}
>
    {{ $slot }}
</span>
```