Hover Card for Angular

import { AuiHoverCard } from '@absoluteui/angular/hover-card';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Hover Card page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { hoverCard: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiHoverCard } from '@absoluteui/angular/hover-card';

@Component({
  selector: 'app-author',
  imports: [AuiHoverCard],
  template: `
    <a href="/u/ada" [auiHoverCard]="card" hoverCardPlacement="bottom-start" (closed)="closed()">Ada</a>
    <ng-template #card>
      <p>Ada Lovelace, mathematician.</p>
      <a href="/u/ada/posts">Posts</a>
    </ng-template>
  `,
})
export class AuthorComponent {
  closed(): void {}
}

[auiHoverCard]

Class AuiHoverCard; template reference #ref="auiHoverCard".

AbsoluteUI Hover Card on its trigger: <a href="/u/ada" [auiHoverCard]="card">Ada</a><ng-template #card>...</ng-template>. The template is rendered as an embedded view, so its bindings stay live.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiHoverCard	TemplateRef<unknown>		Required. The card content: an <ng-template> reference.
hoverCardPlacement	Placement	'bottom'	Preferred side and logical alignment; flips and shifts to fit.
hoverCardShowDelay	number	'600'	Delay before showing on hover or keyboard focus, ms. 0 shows synchronously.
hoverCardHideDelay	number	'300'	Grace period after the pointer leaves trigger and card before hiding, ms. Always asynchronous, so the pointer can move onto the card.
hoverCardDescribe	boolean	true	The trigger references the card with aria-describedby (added to existing ids). Set false for long or highly interactive cards.
hoverCardDirection	"ltr" | "rtl"	'ltr'	Resolves logical start/end placements.

Outputs

Output	Payload	Description
(opened)	null	After the card became visible (dispatched on the card element). Re-emits aui-open.
(closed)	HoverCardCloseDetail	After the card was hidden. ‘programmatic’ covers hide(), destroy(), and another hover card showing. Re-emits aui-close.

Methods

Call them through a viewChild query or a template reference.

Method	Description
show(): void	Show the card now (without the hover delay).
hide(): void	Hide the card.