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>