Overlay

Popover

A panel of content next to an element — a share box, a small form, a list of notifications. Focus moves inside when it opens and back when it closes.

Features6

API

Theming

Basic

[txPopoverTrigger] opens and closes the popover. Focus moves to the first field; Escape, the close button or a click outside close it and focus returns to the button.

10 lines

<button txButton icon="share-alt" [txPopoverTrigger]="share">Share</button><tx-popover #share header="Share this report" closeButton>  <div class="share">    <input txInput aria-label="Report link" readonly [value]="link" />    <button txButton severity="secondary" [outlined]="true" (click)="copy()">      {{ copied() ? 'Copied' : 'Copy' }}    </button>  </div>  <p class="note">Anyone with the link can view the report.</p></tx-popover>

Form

A small form with actions in the txPopoverFooter slot. Call hide() on the popover from its own buttons.

Budget: $1,200

17 lines

<div class="row">  <span>Budget: <tx-amount [amount]="budget()" currency="USD" [strong]="true" /></span>  <button txButton size="small" severity="secondary" [text]="true" [txPopoverTrigger]="edit">    Change  </button></div><tx-popover #edit header="Monthly budget" (opened)="draft = budget()">  <tx-field label="Amount" hint="Applies from the next month.">    <tx-input-number mode="currency" currency="USD" [min]="0" [(ngModel)]="draft" />  </tx-field>  <div txPopoverFooter>    <button txButton size="small" severity="secondary" [text]="true" (click)="edit.hide()">      Cancel    </button>    <button txButton size="small" (click)="budget.set(draft ?? 0); edit.hide()">Save</button>  </div></tx-popover>

The arrow points at the middle of the element for a centred placement and sits near its start or end for -start and -end; placement takes any of the 12 placements. Without a header, name the dialog with ariaLabel.

10 lines

<div class="row">  @for (placement of placements; track placement) {    <button txButton severity="secondary" [outlined]="true" [txPopoverTrigger]="pop">      {{ placement }}    </button>    <tx-popover #pop arrow [placement]="placement" [ariaLabel]="'Popover on the ' + placement">      Opens on the <strong>{{ placement }}</strong> side and flips when there is no room.    </tx-popover>  }</div>

Target

One popover for many elements: toggle($event) anchors it to the clicked button and moves it when another one is clicked. <ng-template txPopoverContent> creates the content only while it is open.

Q3 report.pdf
Roadmap.xlsx
Logo.svg

29 lines

<ul class="files">  @for (file of files; track file.name) {    <li>      <span>{{ file.name }}</span>      <button        txButton        icon="info-circle"        size="small"        severity="secondary"        [text]="true"        aria-haspopup="dialog"        [attr.aria-label]="'Details of ' + file.name"        (click)="selected.set(file); details.toggle($event)"      ></button>    </li>  }</ul><tx-popover #details placement="right-start" [header]="selected().name">  <ng-template txPopoverContent>    <dl class="details">      <dt>Size</dt>      <dd>{{ selected().size }}</dd>      <dt>Owner</dt>      <dd>{{ selected().owner }}</dd>      <dt>Updated</dt>      <dd>{{ selected().updated }}</dd>    </dl>  </ng-template></tx-popover>

Nested

A popover can open another one from inside. A click in the inner popover keeps the outer one open; Escape closes the top one first.

38 lines

<button  txButton  icon="filter"  severity="secondary"  [outlined]="true"  [txPopoverTrigger]="filters">  Filters</button><tx-popover #filters header="Filters">  <div class="line">    <span>Period</span>    <button      txButton      size="small"      severity="secondary"      [outlined]="true"      [txPopoverTrigger]="period"    >      {{ chosen() }}    </button>  </div>  <tx-popover #period placement="right-start" ariaLabel="Period">    <div class="options">      @for (option of periods; track option) {        <button          txButton          size="small"          [severity]="option === chosen() ? 'primary' : 'secondary'"          [text]="option !== chosen()"          (click)="chosen.set(option); period.hide()"        >          {{ option }}        </button>      }    </div>  </tx-popover></tx-popover>

Design tokens

dt changes the tokens of one popover; override popover in the preset for all of them.

20 lines

<button txButton severity="secondary" [outlined]="true" [txPopoverTrigger]="tip">  What is new</button><tx-popover  #tip  arrow  header="Version 2.4"  closeButton  [dt]="{    root: {      background: 'var(--tx-primary-soft)',      borderColor: 'var(--tx-primary-base)',      borderRadius: 'var(--tx-radius-md)',      maxWidth: '280px',    },    arrow: { size: '12px' },  }">  Reports can now be shared with a link and exported to CSV.</tx-popover>