Ivorie

Hover Card

Rich content in a floating panel shown on hover.

import { … } from '@inlaylab/ivorie/hover-card'
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_HOVER_CARD_IMPORTS } from '@inlaylab/ivorie/hover-card';

@Component({
  selector: 'demo-hover-card',
  imports: [IV_HOVER_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-hover-card>
      <a ivHoverCardTrigger href="#" class="text-primary underline underline-offset-4">&#64;nextjs</a>
      <iv-hover-card-content class="w-72">
        <p class="text-sm font-medium">Next.js</p>
        <p class="text-xs text-muted-foreground">The React Framework, created and maintained by Vercel.</p>
      </iv-hover-card-content>
    </iv-hover-card>
  `,
})
export default class HoverCardDemo {}

Installation

CLInpm
npx ivorie add hover-card

Shows a card next to a trigger after a hover delay. The card renders in a CDK overlay.

Usage

import { IV_HOVER_CARD_IMPORTS } from '@inlaylab/ivorie/hover-card';
<iv-hover-card>
  <a ivHoverCardTrigger href="#">@nextjs</a>
  <iv-hover-card-content>The React Framework</iv-hover-card-content>
</iv-hover-card>

Examples

Delays

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_HOVER_CARD_IMPORTS } from '@inlaylab/ivorie/hover-card';

@Component({
  selector: 'demo-hover-card-delays',
  imports: [IV_HOVER_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-hover-card [openDelay]="0" [closeDelay]="500">
      <span ivHoverCardTrigger tabindex="0" class="underline underline-offset-4">Opens at once</span>
      <iv-hover-card-content class="w-64">
        <p class="text-sm">Opens with no delay and stays for 500ms after you leave.</p>
      </iv-hover-card-content>
    </iv-hover-card>
  `,
})
export default class HoverCardDelaysDemo {}

Side and align

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { IV_HOVER_CARD_IMPORTS } from '@inlaylab/ivorie/hover-card';

@Component({
  selector: 'demo-hover-card-side-align',
  imports: [IV_HOVER_CARD_IMPORTS],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <iv-hover-card>
      <span ivHoverCardTrigger tabindex="0" class="underline underline-offset-4">Hover for a card above</span>
      <iv-hover-card-content side="top" align="start" class="w-64">
        <p class="text-sm">Appears above, aligned to the start.</p>
      </iv-hover-card-content>
    </iv-hover-card>
  `,
})
export default class HoverCardSideAlignDemo {}

API

Every part also accepts class.

iv-hover-card

Name Type Default Description
openDelay number 200 Ms before the card opens.
closeDelay number 150 Ms before the card closes after the pointer or focus leaves.

ivHoverCardTrigger

Directive on the trigger element. No inputs.

iv-hover-card-content

Name Type Default Description
side 'top' | 'bottom' | 'left' | 'right' 'bottom' Side of the trigger.
align 'start' | 'center' | 'end' 'center' Alignment along the side axis.
sideOffset number 8 Gap to the trigger in px.
alignOffset number 0 Shift along the align axis in px.

Accessibility

  • The trigger has aria-expanded, and aria-controls pointing at the card while open.
  • Opens on hover or focus after openDelay. A click opens it at once.
  • Closes on leave or blur after closeDelay, and on Escape.
  • Moving from the trigger into the card, or back, keeps it open.

Notes

  • The card is not clipped by overflow: hidden ancestors.
  • It mounts on first open.
  • Set the width with class, for example class="w-80".