Q
v0.3

Hover Card

Newv0.3.0

ホバー時にプレビュー情報を表示するカード。リンクやユーザー名のプレビューに使用します。

基本的な使い方

ホバーでカードを表示

tsx
class="token keyword">import {
  HoverCard,
  HoverCardTrigger,
  HoverCardContent,
} class="token keyword">from class="token keyword">class="token string">"@/components/ui";

<class="token tag">HoverCard>
  <class="token tag">div q:slot=class="token keyword">class="token string">"trigger">
    <class="token tag">a href=class="token keyword">class="token string">"#">@username</class="token tag">a>
  </class="token tag">div>
  <class="token tag">HoverCardContent>
    <class="token tag">div class="token keyword">class=class="token keyword">class="token string">"flex gap-class="token number">4">
      <class="token tag">Avatar src=class="token keyword">class="token string">"..." fallback=class="token keyword">class="token string">"DU" />
      <class="token tag">div>
        <class="token tag">h4>Demo User</class="token tag">h4>
        <class="token tag">p>@username</class="token tag">p>
      </class="token tag">div>
    </class="token tag">div>
  </class="token tag">HoverCardContent>
</class="token tag">HoverCard>

ユーザープロフィール

詳細なユーザー情報

この投稿は

によって投稿されました。

リンクプレビュー

外部リンクの情報表示

詳しくは

をご覧ください。

商品プレビュー

商品情報のクイックビュー

Props API

PropTypeDefaultDescription
openDelaynumber200表示までの遅延（ミリ秒）
closeDelaynumber100非表示までの遅延（ミリ秒）

Accessibility

  • ホバーだけでなくフォーカスでも表示可能
  • Escape キーでカードを閉じる
  • 適切な遅延により、意図しない表示を防止
  • aria-haspopup と aria-expanded で状態を伝達