Popover

import { KuiButtonDirective, KuiPopoverComponent, KuiPopoverForDirective } from '@kikita-labs/ui';

<div class="basic-popover-example">
  <button [kuiPopoverFor]="myPop" kuiButton type="button">Open</button>

  <kui-popover #myPop placement="bottom" [arrow]="true" ariaLabel="Details">
    <div class="kui-popover-title">Title</div>
    <div class="kui-popover-desc">Supporting text.</div>
  </kui-popover>
</div>

<div class="action-popover-example">
  <button [kuiPopoverFor]="confirmPop" kuiButton type="button" appearance="danger">Delete</button>

  <kui-popover
    #confirmPop
    placement="bottom"
    align="start"
    [arrow]="true"
    ariaLabel="Delete record"
  >
    <div class="kui-popover-title">Delete record?</div>
    <div class="kui-popover-desc" style="margin-bottom: 12px">This cannot be undone.</div>
    <div style="display: flex; gap: 8px; justify-content: flex-end">
      <button kuiButton type="button" shape="outline" size="sm" (click)="confirmPop.close()">
        Cancel
      </button>
      <button
        kuiButton
        type="button"
        appearance="danger"
        size="sm"
        (click)="delete(); confirmPop.close()"
      >
        Delete
      </button>
    </div>
  </kui-popover>

  @if (deleted()) {
    <span class="action-popover-example__status">Record deleted.</span>
  }
</div>

<div class="hover-popover-example">
  <button [kuiPopoverFor]="hoverPop" kuiButton type="button">Hover me</button>

  <kui-popover
    #hoverPop
    placement="top"
    triggerType="hover"
    [arrow]="true"
    ariaLabel="Hover details"
  >
    <div class="kui-popover-desc">Opens on hover. Mouse can travel to the panel.</div>
  </kui-popover>
</div>