Component

Popover

A floating panel anchored to a trigger. Open it by click or hover, place it on any side and alignment, set its width, manage focus, control dismissal, and drive it as a controlled overlay.

Trigger, header & form

import { ChangeDetectionStrategy, Component } from '@angular/core';

import { HbButtonComponent, HbInputDirective, HbPopoverImports } from '@herbst/ui';

@Component({
  selector: 'hb-demo-popover-basic',
  imports: [HbPopoverImports, HbButtonComponent, HbInputDirective],
  template: `
    <hb-popover>
      <button hbPopoverTrigger hb-button hbType="outline">Rename photo</button>

      <hb-popover-content [hbWidth]="288">
        <hb-popover-header>
          <h4 hb-popover-title>Rename photo</h4>
          <p hb-popover-description>Update the display name for this photo.</p>
        </hb-popover-header>

        <div class="mt-3 flex items-center gap-2">
          <input hb-input hbFluid value="Oak leaves" />
          <button hb-button hbSize="sm" hbPopoverClose>Save</button>
        </div>
      </hb-popover-content>
    </hb-popover>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HbDemoPopoverBasicComponent {}

Side, align, offset & width

Hover, controlled & dismissal

API reference

hb-popover — opening

Property	Description	Type	Default
[hbTrigger]	Open on click or on hover.	'click' \| 'hover'	'click'
[hbSide] / [hbAlign] / [hbSideOffset]	Preferred side, alignment along that side, and the gap in pixels. Flips to the opposite side if space is tight.	side / align / number	'bottom' / 'center' / 4
[hbOpenDelay] / [hbCloseDelay]	Hover delays in milliseconds before opening and before closing.	number	100 / 150
[hbOpen] / (hbOpenChange)	Controlled open state (undefined for uncontrolled), and an event as it opens and closes.	boolean \| undefined / boolean	undefined / —
[hbDisabled]	Prevent the popover from ever opening.	boolean	false

hb-popover — focus & dismissal

Property	Description	Type	Default
[hbAutoFocus] / [hbRestoreFocus]	Focus the first focusable element on open, and return focus to the trigger on close.	boolean	true
[hbCloseOnEscape] / [hbCloseOnOutsideClick]	Dismiss on the Escape key, and on clicking outside the panel.	boolean	true

Trigger & content

Property	Description	Type	Default
[hbPopoverTrigger]	Marks the projected element that opens the popover.	directive	—
hb-popover-content [hbWidth]	The panel body. hbWidth is a number (px) or any CSS length; null for auto.	number \| string \| null	null
hb-popover-header / -title / -description	Structured header parts for a heading and supporting text.	component	—
[hbPopoverClose]	Any element inside the panel that closes the popover on click.	directive	—