ComponentCDK OverlayUpdated in v15.1

Popover

Show a template, or a text tooltip, next to its trigger.

Installation

Import the class, and @use the entry point in your global styles: without it the component renders unstyled.

import { Component } from '@angular/core';
import { WrPopover } from 'ngwr/popover';

@Component({ imports: [WrPopover] })
export class MyComponent {}

Basic usage

Pass an <ng-template> to [wrPopover]; a click opens it.

<wr-btn [wrPopover]="info">Details</wr-btn>

<ng-template #info>
  <div style="padding: 1rem; max-width: 16rem">
    Anything you can render in a template.
  </div>
</ng-template>

Hover trigger

trigger="hover" opens on hover and closes when the pointer leaves both trigger and panel.

<wr-btn [wrPopover]="card" trigger="hover">Hover me</wr-btn>

Positions

The panel flips when there is no room.

<wr-btn [wrPopover]="hint" position="right">Right</wr-btn>

Tooltip mode

Pass a string and mode="tooltip". It opens on hover or keyboard focus.

SaveDeleteOpen
<wr-btn [wrPopover]="'Save changes'" mode="tooltip" position="top">Save</wr-btn>

Tooltip — custom delays

Hover
<wr-btn
  [wrPopover]="'Slow to appear'"
  mode="tooltip"
  [showDelay]="500"
  [hideDelay]="100"
>
  Hover
</wr-btn>

Template reference

Export as wrPopover to open or close the panel from another control.

<wr-btn [wrPopover]="card" #details="wrPopover">Details</wr-btn>

<!-- From another control use open() and close(), not toggle(). -->
<wr-btn [disabled]="details.isOpen()" (click)="details.open()">Open</wr-btn>
<wr-btn [disabled]="!details.isOpen()" (click)="details.close()">Close</wr-btn>

Scrolling containers

Add cdkScrollable to your own scrolling box, or the panel stays put while it scrolls.

import { CdkScrollable } from '@angular/cdk/scrolling';

@Component({
  imports: [CdkScrollable, WrPopover],
  template: `
    <div class="side-panel" cdkScrollable>
      <wr-btn [wrPopover]="info">Details</wr-btn>
    </div>
  `,
})
export class PanelComponent {}

API

NameDescriptionTypeDefault
wrPopoverrequiredContent to render inside the panel. - In popover mode (default): pass a TemplateRef. - In tooltip mode: pass a plain string.TemplateRef<unknown> | string—
modeShape preset. - 'popover' (default) — template content, click trigger, dialog semantics. - 'tooltip' — text content, hover / keyboard-focus trigger, role="tooltip", aria-describedby on the host.'popover' | 'tooltip''popover'
triggerHow the popover opens. Ignored in tooltip mode — a tooltip is always hover plus keyboard focus. A hover popover still opens from the keyboard, with Enter or Space on the trigger, and then takes focus the way a click one does.'click' | 'hover''click'
positionAnchor side.WrPopoverPosition | null'bottom' for popover, 'top' for tooltip
showDelayTooltip only — delay before showing, in ms.number120
hideDelayTooltip only — delay before hiding, in ms.number60
ariaLabelPopover mode only — accessible name of the panel. role="dialog" with no name announces as a bare "dialog", so the catalog's popover.label is used when nothing is given. A popover has no universal name; whenever the panel has a heading or a purpose, pass it.string | nullnull
panelClassExtra CSS classes for the popover's (or tooltip's) overlay pane. The pane is appended to the overlay container, not to this component, so nothing in the consumer's own template encloses it and no descendant rule written around the trigger can reach it. This input is the only per-instance handle on it. A space-separated string works as well as an array.WrClassInputnull
(opened)Fires after the panel opens.void—
(closed)Fires after the panel closes.void—

CSS variables

Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/popover's own element.

VariableDefaultDeclared on
--wr-chart-tooltip-gapvar(--wr-space-sm).wr-chart-tooltip
--wr-chart-tooltip-head-font-weightvar(--wr-font-weight-semibold).wr-chart-tooltip__head
--wr-chart-tooltip-row-gapvar(--wr-space-xs).wr-chart-tooltip
--wr-chart-tooltip-row-value-font-weightvar(--wr-font-weight-semibold).wr-chart-tooltip__row-value
--wr-chart-tooltip-value-font-weightvar(--wr-font-weight-semibold).wr-chart-tooltip__value
--wr-popover-bordervar(--wr-border-base).wr-popover-overlay > *
--wr-popover-font-familyvar(--wr-font-family-base).wr-popover-overlay > *
--wr-popover-radiusvar(--wr-border-radius-base).wr-popover-overlay > *
--wr-tooltip-bgvar(--wr-color-surface).wr-tooltip
--wr-tooltip-bordervar(--wr-border-base).wr-tooltip
--wr-tooltip-colorvar(--wr-color-on-surface).wr-tooltip
--wr-tooltip-font-familyvar(--wr-font-family-base).wr-tooltip
--wr-tooltip-font-sizevar(--wr-text-xs).wr-tooltip
--wr-tooltip-line-heightvar(--wr-text-xs-leading).wr-tooltip
--wr-tooltip-padding-xvar(--wr-space-sm).wr-tooltip
--wr-tooltip-padding-yvar(--wr-space-xs).wr-tooltip
--wr-tooltip-radiusvar(--wr-border-radius-sm).wr-tooltip

Dependencies

Angular CDKa11y, overlay, portal, scrolling
Built onOverlay
Used byBar Chart, Box Plot, Bullet Chart, Calendar Heatmap, Candlestick Chart, Donut Chart, Funnel Chart, Gauge, Heatmap Chart, Meter Group, Radar Chart, Scatter Chart, Sparkline, Treemap Chart, Waterfall Chart, Editor

See also

2022 – 2026 © Roman Khegayv15.1.0