Interface Mais detalhes D · Nome de uso diário ou especial

Hover Card

Cartão de Passeio

Um hover card é uma preview rica. Ele abre quando você passa o mouse ou foca numa referência, sem bloquear a página.

Você poderia chamar de Hover Cardcartão de visualizaçãodica rica

Experimente um exemplo

Cartão de PasseioHoverCard

Um exemplo real

Passe o mouse sobre o nome de um autor para ver uma pequena biografia e a contagem de seguidores. O perfil completo permanece fechado.

Partes principais

  1. 01Acionar
  2. 02Anchored or modal surface
  3. 03Focus boundary
  4. 04Dismiss path

Use-o quando

Use-o para detalhes de visualização opcionais que ajudam as pessoas a escolher para onde ir em seguida.

Não o use quando

Nunca esconda informações obrigatórias atrás de hover, porque dispositivos de toque podem não abri-las de forma confiável.

Nome usado no código

HoverCard

Antes de lançar

Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states.

Solicitação que você pode copiar

Outcome: Complete the task with Cartão de Passeio (Hover Card). User context: Passe o mouse sobre o nome de um autor para ver uma pequena biografia e a contagem de seguidores. O perfil completo permanece fechado. Recommended pattern: Cartão de Passeio (Hover Card). Why it fits: Use-o para detalhes de visualização opcionais que ajudam as pessoas a escolher para onde ir em seguida. Do not use it when: Nunca esconda informações obrigatórias atrás de hover, porque dispositivos de toque podem não abri-las de forma confiável. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Isto não é um padrão normativo. Seu nome, limites e comportamento esperado podem mudar de uma fonte para outra. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.

Conferir este pedido

Review how Cartão de Passeio (Hover Card) is used now. Definition: Um hover card é uma preview rica. Ele abre quando você passa o mouse ou foca numa referência, sem bloquear a página. Release checks: Move focus on purpose. Keep it inside only when the overlay blocks the page. Support Escape and a visible close button, then return focus to the opener. Keep entered data and check small-screen, loading, and failure states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.

D
Quão oficial é este termo?

Nome de uso diário ou especial

Este pode ser um nome comum ou antigo, um nome usado por uma empresa, ou uma categoria do Vibulary. As fontes podem apoiar a prática ou as limitações, mas podem não definir o nome.

Isto não é um padrão normativo. Seu nome, limites e comportamento esperado podem mudar de uma fonte para outra.

Escopo
Apenas o que a fonte cobre:nome canônico、definição、API da plataforma、implementação、orientação de uso
Status do documento
estável
Verificado em
2026-07-30

Fontes e escopo da evidência

Fonte de autoridade · Radix UI · estável Hover Card Escopo: nome canônico、definição、API da plataforma、implementação、orientação de uso Papel aqui: Contexto útil, não uma definição A fonte cobre: nome canônico, definição, API da plataforma, implementação, orientação de uso

Copie você mesmo

O navegador não conseguiu copiar isso. Selecione a solicitação abaixo e copie você mesmo.