Hover card

Preview content on hover (Angular CDK).

hover me

import { BuiHoverCard, BuiHoverCardContent } from 'ng-blatui';

<span [buiHoverCard]="tpl">@username</span>
<ng-template #tpl>
  <div buiHoverCardContent>Profile preview content…</div>
</ng-template>

User card

@sofia

<a buiButton variant="link" [buiHoverCard]="tpl">@sofia</a>
<ng-template #tpl>
  <div buiHoverCardContent class="w-72">
    <div class="flex gap-3"><bui-avatar>SC</bui-avatar> Sofia Carter — Product designer.</div>
  </div>
</ng-template>

Instant

hover me (no delay)

<!-- [openDelay]="0" opens immediately -->
<span [buiHoverCard]="tpl" [openDelay]="0">hover me</span>

API reference

Inputs

Prop	Type	Default	Description
`buiHoverCard`*	`TemplateRef<unknown>`	—	Template rendered inside the card; bound via the `buiHoverCard` attribute.
`openDelay`	`number`	`400`	Delay in milliseconds before the card opens on hover/focus.
`closeDelay`	`number`	`100`	Delay in milliseconds before the card closes after the pointer leaves.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.