Popover

import { BuiPopover, BuiPopoverContent } from 'ng-blatui';

<button buiButton variant="outline" [buiPopover]="tpl">Open</button>
<ng-template #tpl>
  <div buiPopoverContent>
    <p class="text-sm">Popover content goes here.</p>
  </div>
</ng-template>

<ng-template #tpl>
  <div buiPopoverContent class="w-80">
    <h4 class="font-medium">Dimensions</h4>
    <div class="grid grid-cols-3 items-center gap-4">
      <label buiLabel for="w">Width</label>
      <input id="w" buiInput value="100%" class="col-span-2 h-8" />
    </div>
  </div>
</ng-template>

<ng-template #tpl>
  <div buiPopoverContent class="w-80">
    <h4 class="font-medium">Share link</h4>
    <div class="flex gap-2">
      <input buiInput value="https://…" class="h-8" readonly />
      <button buiButton size="sm">Copy</button>
    </div>
  </div>
</ng-template>

<!-- side = top | right | bottom | left (defaults to bottom) -->
<button buiButton [buiPopover]="tpl" side="right">Right</button>

<button buiButton [buiPopover]="tpl">Send feedback</button>
<ng-template #tpl>
  <div buiPopoverContent class="w-80">
    <h4 class="font-medium">Send feedback</h4>
    <textarea class="min-h-20 w-full rounded-md border p-2 text-sm"></textarea>
    <button buiButton size="sm" class="w-full">Submit</button>
  </div>
</ng-template>