Components / Hover Card

Hover Card

A delayed preview for information already available through a link.

example.component.html

html

<aevko-hover-card>
  <a aevkoHoverCardTrigger href="/people/ada">
    Ada Lovelace
  </a>
  <strong>
    Ada Lovelace
  </strong>
  <p>
    Maintainer of the analytical workspace.
  </p>
</aevko-hover-card>

Installation

npx aevko-ui@latest add hover-card --yes

Source ownership

Customization

Use a native link as the trigger and keep the preview supplementary; edit delays and dimensions locally for the density of your product.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`open`	`model<boolean>`	`false`	Observable preview visibility.
`side / align`	`union`	`'bottom' / 'center'`	Preview placement.
`delay / closeDelay`	`number`	`150 / 200`	Open and close delays in milliseconds.
`aevkoHoverCardTrigger`	`projected slot`	`required`	Usually a native link to the full destination.

Accessibility contract

Accessibility

Included behavior

The preview opens on pointer hover or keyboard focus and its description relationship is applied to the trigger.

Your responsibility

Ensure the trigger still navigates to the complete information and never place essential or highly interactive content only in the preview.

Back to all components