Hover Card

An enterprise-level hover card component based on BrConfigProvider for global theme configuration. It supports adaptive positioning, lazy rendering, and keyboard navigation, and can be seamlessly integrated with components like BrTable and BrList.

Component Features

🎯 Adaptive Positioning: Intelligent space calculation, supports auto-avoidance and multi-direction (top/bottom/left/right) popups.
⚡ Seamless Integration: Perfectly integrates with components like BrTable, BrList, and BrAvatar to handle complex interactions.
🎨 Theme Customization: Supports global customization based on BrConfigProvider and local style overrides via TailwindCSS.
⌨️ Accessibility: Built-in keyboard navigation (Tab switching, ESC to close) and delay control to avoid accidental touches.
📦 Multi-instance Management: Comes with HoverCardManager to provide automatic z-index incrementation for global layering.

Basic Usage

The most basic hover card, displayed when the mouse hovers over the trigger element.

<script setup lang="ts">
import { BrHoverCard, BrHoverCardTrigger, BrHoverCardContent, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrHoverCard>
    <BrHoverCardTrigger as-child>
      <BrButton variant="link">Hover me</BrButton>
    </BrHoverCardTrigger>
    <BrHoverCardContent class="w-80">
      <div class="flex justify-between space-x-4">
        <div class="space-y-1">
          <h4 class="text-sm font-semibold">BreezeUI</h4>
          <p class="text-sm">
            An enterprise-class UI components based on Vue3, TailwindCSS and Radix Vue.
          </p>
        </div>
      </div>
    </BrHoverCardContent>
  </BrHoverCard>
</template>

Integration with Avatar

Commonly used for displaying user information, hovering over the avatar to show detailed user profiles.

<script setup lang="ts">
import { BrHoverCard, BrHoverCardTrigger, BrHoverCardContent, BrAvatar, BrAvatarImage, BrAvatarFallback } from '@breezeui/vue'
import { CalendarDays } from 'lucide-vue-next'
</script>

<template>
  <BrHoverCard>
    <BrHoverCardTrigger as-child>
      <BrAvatar class="cursor-pointer">
        <BrAvatarImage src="https://github.com/vuejs.png" alt="@vuejs" />
        <BrAvatarFallback>VU</BrAvatarFallback>
      </BrAvatar>
    </BrHoverCardTrigger>
    <BrHoverCardContent class="w-80">
      <div class="flex justify-between space-x-4">
        <BrAvatar>
          <BrAvatarImage src="https://github.com/vuejs.png" />
          <BrAvatarFallback>VU</BrAvatarFallback>
        </BrAvatar>
        <div class="space-y-1">
          <h4 class="text-sm font-semibold">@vuejs</h4>
          <p class="text-sm">
            The Progressive JavaScript Framework.
          </p>
          <div class="flex items-center pt-2">
            <CalendarDays class="mr-2 h-4 w-4 opacity-70" />
            <span class="text-xs text-muted-foreground">
              Joined December 2013
            </span>
          </div>
        </div>
      </div>
    </BrHoverCardContent>
  </BrHoverCard>
</template>

Integration with Table

Display more extended information or operation forms when hovering over a table row.

<script setup lang="ts">
import { 
  BrHoverCard, BrHoverCardTrigger, BrHoverCardContent,
  BrTable, BrTableHeader, BrTableRow, BrTableHead, BrTableBody, BrTableCell,
  BrBadge 
} from '@breezeui/vue'

const invoices = [
  { invoice: "INV001", paymentStatus: "Paid", totalAmount: "$250.00", paymentMethod: "Credit Card" },
  { invoice: "INV002", paymentStatus: "Pending", totalAmount: "$150.00", paymentMethod: "PayPal" },
]

const columns = [
  { title: 'Invoice', key: 'invoice', width: 100 },
  { title: 'Status', key: 'paymentStatus' },
  { title: 'Method', key: 'paymentMethod' },
  { title: 'Amount', key: 'totalAmount', align: 'right' }
]
</script>

<template>
  <BrTable :columns="columns" :data="invoices">
    <template #cell-invoice="{ row }">
      <span class="font-medium">
        <BrHoverCard>
          <BrHoverCardTrigger>
            <span class="cursor-help underline underline-offset-4">
              {{ row.invoice }}
            </span>
          </BrHoverCardTrigger>
          <BrHoverCardContent class="w-64">
            <div class="space-y-2">
              <h4 class="font-medium leading-none">Invoice Details</h4>
              <p class="text-sm text-muted-foreground">
                Transaction details for {{ row.invoice }} via {{ row.paymentMethod }}.
              </p>
            </div>
          </BrHoverCardContent>
        </BrHoverCard>
      </span>
    </template>
    <template #cell-paymentStatus="{ row }">
      <BrBadge :variant="row.paymentStatus === 'Paid' ? 'default' : 'secondary'">
        {{ row.paymentStatus }}
      </BrBadge>
    </template>
  </BrTable>
</template>

Theme Customization

Supports using BrConfigProvider for global configuration of the HoverCard, or using TailwindCSS for local style isolation and customization.

<script setup lang="ts">
import { BrConfigProvider, BrHoverCard, BrHoverCardTrigger, BrHoverCardContent, BrButton } from '@breezeui/vue'
</script>

<template>
  <BrConfigProvider 
    :theme="{ 
      variables: { 
        '--radius': '1rem',
        '--popover': '220 10% 95%'
      } 
    }"
  >
    <div class="p-6">
      <BrHoverCard>
        <BrHoverCardTrigger as-child>
          <BrButton>Custom HoverCard</BrButton>
        </BrHoverCardTrigger>
        <BrHoverCardContent 
          :isolated="true" 
          class="w-80 border-2 border-primary bg-primary/10 shadow-xl"
        >
          <div class="text-primary-foreground font-medium">
            Flexible customization in light and dark modes.
          </div>
        </BrHoverCardContent>
      </BrHoverCard>
    </div>
  </BrConfigProvider>
</template>

API Reference

BrHoverCard

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	The open state of the hover card when it is initially rendered.
`open`	`boolean`	`false`	The controlled open state of the hover card.
`openDelay`	`number`	`700`	The duration from when the mouse enters the trigger until the hover card opens.
`closeDelay`	`number`	`300`	The duration from when the mouse leaves the trigger or content until the hover card closes.
`@update:open`	`(value: boolean) => void`	-	Event handler called when the open state of the hover card changes.

BrHoverCardTrigger

A wrapper that contains the trigger element. By default, it uses asChild.

BrHoverCardContent

Prop	Type	Default	Description
`placement`	`'top' \| 'bottom' \| 'left' \| 'right' \| 'top-start' etc. (12 types)`	`'bottom'`	The preferred placement of the hover card relative to the trigger.
`sideOffset`	`number`	`4`	The distance in pixels from the trigger.
`loading`	`boolean`	`false`	Whether to show the loading placeholder.
`empty`	`boolean`	`false`	Whether to show the empty data placeholder.
`zIndex`	`number`	Auto increment	The z-index layer of the card, automatically managed by `HoverCardManager` by default.
`isolated`	`boolean`	`false`	Whether to enable style isolation classes to avoid global style pollution.

HoverCardManager

A static management class used to manage the global state and layering of hover cards.

Method	Return Type	Description
`nextZIndex()`	`number`	Gets the next auto-incremented z-index, used for handling multi-instance nested layers.

#Hover Card

#Component Features

#Basic Usage

#Integration with Avatar

#Integration with Table

#Theme Customization

#API Reference

#BrHoverCard

#BrHoverCardTrigger

#BrHoverCardContent

#HoverCardManager