ng tailng

Overview

tng-popover is an interactive anchored overlay that opens on click. Use for small controls/settings; for action lists use Menu. Trigger: element with tngPopoverTrigger. Content: #popoverContent ng-template or element with tngPopoverContent. Optional controlled state via open / openChange. Inputs: placement, offset, width, closeOnOutsideClick, closeOnEscape. Slot styling: root, trigger, panel.

Quick example

Basic (uncontrolled)
HTMLTSCSS

<tng-popover>
  <button tngPopoverTrigger>Open popover</button>
  <ng-template #popoverContent>
    <div class="min-w-56 space-y-2 text-sm">
      <div class="font-medium">Quick settings</div>
      <p class="text-muted-foreground">Click outside or Escape to close.</p>
    </div>
  </ng-template>
</tng-popover>

Features

Trigger & content

Use tngPopoverTrigger on the trigger element. Content: #popoverContent ng-template or tngPopoverContent projected content.

Controlled / uncontrolled

Bind open and openChange for controlled mode; otherwise internal state. toggle(), requestOpen(), requestClose() for programmatic control.

Slot styling

root, trigger, panel slots for theming.