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.

背景视口

src/App.vue

<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>

<script setup>
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>

import { CfHoverCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfHoverCard>
          <span style={{ background: "var(--bg-2)", padding: "4px 8px", borderRadius: "var(--r-3)", cursor: "pointer" }}>@jane.l</span>
            <div style={{ display: "flex", gap: 10 }}>
              <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--accent-1)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--fg-on-accent)", fontWeight: 500 }}>JL</span>
              <div>
                <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>Jane Liu</div>
                <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>[email protected]</div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", marginTop: 4 }}>Backend · Payments · UTC+8</div>
              </div>
            </div>
    </>
  );
}

import { CfHoverCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfHoverCard>
          <span style={{ background: "var(--bg-2)", padding: "4px 8px", borderRadius: "var(--r-3)", cursor: "pointer" }}>@jane.l</span>
            <div style={{ display: "flex", gap: 10 }}>
              <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--accent-1)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--fg-on-accent)", fontWeight: 500 }}>JL</span>
              <div>
                <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>Jane Liu</div>
                <div style={{ fontSize: 11, color: "var(--fg-3)", fontFamily: "var(--font-mono)" }}>[email protected]</div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", marginTop: 4 }}>Backend · Payments · UTC+8</div>
              </div>
            </div>
    </>
  );
}

Four placements

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

背景视口

topbottomleftright

src/App.vue

<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>

<script setup>
import { CfHoverCard } from '@chufix-design/vue';
const placements = ['top', 'bottom', 'left', 'right'];
</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>

import { CfHoverCard } from '@chufix-design/react';

export default function Demo() {
  const placements = ['top', 'bottom', 'left', 'right'] as const;
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, padding: "60px 16px" }}>
          <CfHoverCard v-for="p in placements" key={p} placement={p} openDelay={200}>
            <span style={{ background: "var(--bg-2)", padding: "6px 10px", borderRadius: "var(--r-3)", cursor: "pointer", textAlign: "center", display: "inline-block" }}>{p}</span>
              <div style={{ padding: "4px 0" }}>
                <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>{p} 弹出</div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", marginTop: 2 }}>200ms 延迟</div>
              </div>
    </>
  );
}

import { CfHoverCard } from '@chufix-design/react';

export default function Demo() {
  const placements = ['top', 'bottom', 'left', 'right'];
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, padding: "60px 16px" }}>
          <CfHoverCard v-for="p in placements" key={p} placement={p} openDelay={200}>
            <span style={{ background: "var(--bg-2)", padding: "6px 10px", borderRadius: "var(--r-3)", cursor: "pointer", textAlign: "center", display: "inline-block" }}>{p}</span>
              <div style={{ padding: "4px 0" }}>
                <div style={{ fontWeight: 500, color: "var(--fg-1)" }}>{p} 弹出</div>
                <div style={{ fontSize: 12, color: "var(--fg-2)", marginTop: 2 }}>200ms 延迟</div>
              </div>
    </>
  );
}

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`