Hover Card

• Hover Card: a preview opened by hover or focus, whose content may be interactive. It adds no ARIA relationship to its trigger, so the card may only enrich what the trigger already conveys.
• Tooltip: the same hover / focus cadence, but the content is non-interactive and becomes the trigger's aria-describedby description. Choose it when the text is the trigger's hint.
• Popover: opens on activation rather than on hover, and focus moves into the surface. Choose it when the content must be reachable from the keyboard.

<span forHoverCard #card="forHoverCard" side="top">
  <a forHoverCardTrigger href="/users/ada">Ada Lovelace</a>
  <!-- @if (card.open()) { -->
  <div forHoverCardContent animate.enter="card-in" animate.leave="card-out">
    <h3>Ada Lovelace</h3>
    <p>Mathematician — designed the first algorithm.</p>
    <span forHoverCardArrow></span>
  </div>
  <!-- } -->
</span>

import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
  ForHoverCard,
  ForHoverCardArrow,
  ForHoverCardContent,
  ForHoverCardTrigger,
} from 'forty-cdk/hover-card';

@Component({
  selector: 'app-hover-card-default-example',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [ForHoverCard, ForHoverCardTrigger, ForHoverCardContent, ForHoverCardArrow],
  template: `
    <p class="hovercard-lead">
      Article by
      <span forHoverCard #card="forHoverCard" side="top">
        <a forHoverCardTrigger class="hovercard-trigger" href="#ada">&#64;ada</a>
        @if (card.open()) {
          <div forHoverCardContent class="hovercard" animate.enter="hovercard-pop-in">
            <div class="hovercard-head">
              <span class="hovercard-avatar" aria-hidden="true">AL</span>
              <div class="hovercard-id">
                <strong>Ada Lovelace</strong>
                <span class="hovercard-handle">&#64;ada</span>
              </div>
            </div>
            <p class="hovercard-bio">
              Mathematician and writer — wrote the first algorithm intended for a machine.
            </p>
            <div class="hovercard-stats">
              <span><b>128</b> notes</span>
              <span><b>1.8k</b> followers</span>
            </div>
            <button class="hovercard-follow" type="button">Follow</button>
            <span forHoverCardArrow class="hovercard-arrow"></span>
          </div>
        }
      </span>
      on the analytical engine.
    </p>
  `,
})
export class HoverCardDefaultExample {}

ForHoverCard

ForHoverCardTrigger

ForHoverCardContent

ForHoverCardArrow

provideForHoverCardDefaults configures defaults for an injector subtree, either at the application root or in any component's providers array. Partial overrides inherit unspecified keys from the parent scope (or the library fallbacks at the root). Peer cards that share a skip-delay window open instantly when one of them closes and the next is hovered within skipDelayDuration.

Per-instance inputs always win over the scope defaults.

A scoped call starts its own skip-delay window only when it sets openDelay, closeDelay or skipDelayDuration. A call that changes only placement or behaviour keys (side, sideOffset, …) joins the window of its parent scope, so moving from a card outside the scope to one inside it still opens instantly. Pass { skipDelayScope: 'own' } or { skipDelayScope: 'inherit' } as the second argument to choose either way. A scope that joins its parent's window keeps the parent's skipDelayDuration for it, while its own openDelay and closeDelay still apply.

The HoverCard coordinator is independent from TooltipCoordinator, because the two patterns have different cadences and shouldn't share their skip-delay windows.

import { provideForHoverCardDefaults } from 'forty-cdk/defaults';

// Right-aligned profile cards app-wide
bootstrapApplication(App, {
  providers: [provideForHoverCardDefaults({ side: 'right', sideOffset: 4 })],
});

// component-level override layers on top, per key
@Component({
  providers: [provideForHoverCardDefaults({ openDelay: 200 })],
  ...
})
class ProfileList {}

// placement-only override, sharing the parent scope's skip-delay window
@Component({
  providers: [provideForHoverCardDefaults({ side: 'left' })],
  ...
})
class Sidebar {}

// a separate window without changing any timing
@Component({
  providers: [provideForHoverCardDefaults({}, { skipDelayScope: 'own' })],
  ...
})
class Panel {}

For programmatic control beyond hover and focus (e.g. a wrapper that opens the card from an external event), ForHoverCard exposes show() and hide() methods. Grab the root with a template reference (#card="forHoverCard") and call them:

import { Component } from '@angular/core';
import { ForHoverCard, ForHoverCardContent, ForHoverCardTrigger } from 'forty-cdk/hover-card';

@Component({
  selector: 'demo-imperative',
  imports: [ForHoverCard, ForHoverCardTrigger, ForHoverCardContent],
  template: `
    <span forHoverCard #card="forHoverCard">
      <a forHoverCardTrigger href="/users/ada">Ada Lovelace</a>
      @if (card.open()) {
        <div forHoverCardContent>Mathematician — designed the first algorithm.</div>
      }
    </span>

    <button type="button" (click)="card.show()">Show</button>
    <button type="button" (click)="card.hide()">Hide</button>
  `,
})
export class DemoImperative {}

Both mirror the hover / focus lifecycle rather than bypassing it:

• show() schedules the open after the resolved openDelay (instant when the delay is 0 or the scope's skip-delay window is active). It passes the same gates a hover open does: it is a no-op while disabled, and a no-op while an ancestor is scrolling (the scroll-dismiss suppression window).
• hide() schedules the close after the resolved closeDelay and disarms the pointer-grace bridge.

For an instant, unconditional open or close that ignores the delays and every gate, write the [(open)] model directly (open.set(true) / open.set(false)) instead.

• Tab to the trigger → opens the card after openDelay. The scroll that brings an off-screen trigger into view does not cancel it.
• Blur (Tab away) → closes the card after closeDelay.
• Escape while open → closes immediately, regardless of where focus currently lives (trigger, portaled content, or an unrelated element). Routed through a document-level dismissible layer that is active only while the card is open. Call preventDefault() on the (escapeKeyDown) output to keep it open. When focus is inside the card, it returns to the trigger, and the card stays closed until the trigger is hovered or focused again.

• Not for tooltips. If your overlay is a non-interactive label / hint, use [forTooltip]. HoverCard does not set aria-describedby; the trigger keeps its own label.
• Trigger must stand alone. Keyboard users don't see hover-only previews. Make sure the trigger's text / aria-label already describes its destination or action.
• Focus opens the card so keyboard users get the preview when tabbing through a list. Blur closes it; Escape closes immediately, no matter where focus currently lives: on the trigger, on a link inside the content, or on an unrelated element (the common case for a card opened by hover). Escape is routed through a document-level dismissible layer that is active only while the card is open.
• Pointer interaction inside the card. Moving the cursor from the trigger to the content cancels the close timer, so users can copy text or follow nested links. A pointer-grace "safe triangle" bridges the gap between the trigger and the content: while the pointer travels across the default sideOffset gap toward the card it is assumed to be heading there, so the card stays open even when closeDelay is 0. This also holds when the content overlaps its trigger (a negative sideOffset). The card closes once the pointer leaves the safe triangle without reaching the card, or on blur / Escape / scroll.
• Focus inside the card holds it open. Once one of its controls has focus (after clicking a button in it, say), the pointer leaving the card or a scroll does not close it; focus leaving the card closes it after closeDelay. If the card closes with focus inside it, focus returns to the trigger rather than falling to the page.
• Use provideForHoverCardDefaults per scope when you need a different cadence for, e.g., a list of profile cards (faster) vs. a sidebar of glossary entries (slower).

forty-cdk ships no styles: put your own class on each piece and key your CSS off the data-* attributes listed under API, not off the for* selectors (Styling forty-cdk explains why).

CSS custom properties

[forHoverCardContent] is portaled to document.body and gets its position resolved by floating-ui. It exposes that geometry as custom properties on the content host (cleared on close), and [forHoverCardArrow] reads the consumer-settable --for-floating-arrow-offset:

[forHoverCardContent] (and the projected [forHoverCardArrow]) is portaled to document.body, so it sits outside your component's view-encapsulated styles. Style it with global CSS or a class you pass on the content element, because component-scoped styles won't reach it. The positioner also writes the shared geometry custom properties listed above (--for-floating-anchor-width / -height, --for-floating-available-width / -height, --for-floating-content-transform-origin); see Styling floating content for the full list and the side/align animation recipe.

.hovercard[data-state='open'] {
  animation: card-in 120ms ease-out;
}
.hovercard {
  max-width: var(--for-floating-available-width);
  transform-origin: var(--for-floating-content-transform-origin);
}

Reduced motion

[forHoverCard] and [forHoverCardContent] reflect data-reduced-motion (present / absent) whenever the OS prefers-reduced-motion: reduce media query matches, so you can opt your own transitions out without re-deriving the query in CSS or TypeScript. The attribute flips reactively if the preference changes mid-session.

.hovercard[data-reduced-motion] {
  animation: none;
  transition: none;
}

The card's open / close delays are hover-intent debouncing rather than motion, so they are deliberately left unchanged under reduced motion. Only the visual transitions (which are yours) should opt out.

• Closes on scroll. When a scroll container holding the trigger moves it under a stationary cursor (wheel / trackpad scrolling a virtualized or overflow-scroll list), an open card closes immediately and hover opens stay suppressed for a short window while the scroll is in flight, so that cards on rows sliding past the pointer don't linger or flicker open. This is always on; a genuine pointer move after scrolling settles opens the card normally again. The keyboard-focus open path is never suppressed. A scroll that does not move the trigger (inside the card, or in an unrelated container) leaves the card open, and so does any scroll while focus is on the trigger or inside the card.
• Arrow offset: [forHoverCardArrow] writes position: absolute, the floating-ui-resolved left / top, and var(--for-floating-arrow-offset, 0px) on the side opposite the card. Set --for-floating-arrow-offset on the arrow element (or any ancestor) to control how far the arrow pokes out. The value is typically a negative px such as -4px. The helper ships no default visual.

Triggers stamped from outside-declared templates

Angular resolves ng-template DI at the template's declaration site, not where it is stamped. A [forHoverCardTrigger] declared in a template outside the root throws the orphan error even when the template is rendered inside the root via ngTemplateOutlet. For that case the selector attribute accepts the root reference as a value, routerLink-style. Grab it with #root="forHoverCard" and pass it through the outlet context. The bare valueless attribute keeps resolving via DI.

<span forHoverCard #root="forHoverCard">
  <ng-container *ngTemplateOutlet="trig; context: { root }" />
  @if (root.open()) {
  <div forHoverCardContent>…</div>
  }
</span>

<ng-template #trig let-root="root">
  <a [forHoverCardTrigger]="root" href="/users/ada">Ada Lovelace</a>
</ng-template>

Subclass the root and re-provide FOR_HOVER_CARD_CONTEXT with useExisting pointing at the subclass, since Angular does not inherit a directive's providers; Wrapping non-form roots walks the pattern.