Hover Card

Prévia rica ao pairar/focar um link ou avatar.

Sobreposições e menus

Carregando demonstração…

Código da demo

"use client";

import { Button } from "@/components/ui/button";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

export function Demo() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="link">@financeequity</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-72">
        <p className="fe-label text-foreground">Finance Equity</p>
        <p className="fe-caption mt-fe-2 text-muted-foreground">
          Design system e brand kit pessoal.
        </p>
      </HoverCardContent>
    </HoverCard>
  );
}

Acessibilidade: Abrível por foco; conteúdo não deve ser a única via crítica.
Importar: import { HoverCard, HoverCardTrigger, HoverCardContent } from "@financeequity/ui/hover-card"
Neste repositório:
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui/hover-card"
Dependências: radix-ui