Preview Updated 2026-05-10

Hover card

Long-delay (700ms) rich preview card. Suited to hover previews for usernames, variables, requests, and other rich-info targets.

Basic usage

Wrap any trigger element; place the card body in the content slot. Delays and placement are configurable.

背景

<script setup lang="ts">
import { CfHoverCard } from '@chufix-design/vue';
</script>

<template>
  <CfHoverCard>
    <span style="background: var(--bg-2); padding: 4px 8px; border-radius: var(--r-3); cursor: pointer;">@jane.l</span>
    <template #content>
      <div style="display: flex; gap: 10px;">
        <span style="width: 36px; height: 36px; border-radius: 50%; background: var(--accent-1); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-on-accent); font-weight: 500;">JL</span>
        <div>
          <div style="font-weight: 500; color: var(--fg-1);">Jane Liu</div>
          <div style="font-size: 11px; color: var(--fg-3); font-family: var(--font-mono);">[email protected]</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 4px;">Backend · Payments · UTC+8</div>
        </div>
      </div>
    </template>
  </CfHoverCard>
</template>

<CfHoverCard placement="bottom" trigger={<span>@jane.l</span>}>
…
</CfHoverCard>

Four placements

top / bottom / left / right — placement is computed automatically. The demo here uses a 200ms short delay for ease of viewing.

背景

topbottomleftright

<script setup lang="ts">
import { CfHoverCard } from '@chufix-design/vue';
const placements = ['top', 'bottom', 'left', 'right'] as const;
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 60px 16px;">
    <CfHoverCard v-for="p in placements" :key="p" :placement="p" :open-delay="200">
      <span style="background: var(--bg-2); padding: 6px 10px; border-radius: var(--r-3); cursor: pointer; text-align: center; display: inline-block;">{{ p }}</span>
      <template #content>
        <div style="padding: 4px 0;">
          <div style="font-weight: 500; color: var(--fg-1);">{{ p }} 弹出</div>
          <div style="font-size: 12px; color: var(--fg-2); margin-top: 2px;">200ms 延迟</div>
        </div>
      </template>
    </CfHoverCard>
  </div>
</template>

<CfHoverCard placement="top" trigger={…}>…</CfHoverCard>

API

Prop	Type	Default	Description
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'bottom'`	Placement
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	220 / 280 / 360 px
`openDelay`	`number`	`700`	Show delay in ms
`closeDelay`	`number`	`200`	Hide delay in ms (avoids flicker)
`disabled`	`boolean`	`false`