Hover Card
Hover-Karte
Eine Hover-Karte ist eine reichhaltige Vorschau. Sie öffnet sich, wenn man über eine Referenz fährt oder sie fokussiert, ohne die Seite zu blockieren.
HoverCardEin echtes Beispiel
Fahren Sie mit dem Mauszeiger über den Namen eines Autors, um eine kurze Biografie und die Anzahl der Follower zu sehen. Das vollständige Profil bleibt geschlossen.
Hauptteile
- 01Auslösen
- 02Anchored or modal surface
- 03Focus boundary
- 04Dismiss path
Verwenden Sie es, wenn
Verwenden Sie es für optionale Vorschau-Details, die den Menschen helfen, zu entscheiden, wohin sie als Nächstes gehen.
Nutze es nicht, wenn
Verstecken Sie niemals erforderliche Informationen hinter Hover, da Touch-Geräte diese möglicherweise nicht zuverlässig öffnen.
In Code verwendeter Name
HoverCard Vor dem Ausliefern
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.
Outcome: Complete the task with Hover-Karte (Hover Card). User context: Fahren Sie mit dem Mauszeiger über den Namen eines Autors, um eine kurze Biografie und die Anzahl der Follower zu sehen. Das vollständige Profil bleibt geschlossen. Recommended pattern: Hover-Karte (Hover Card). Why it fits: Verwenden Sie es für optionale Vorschau-Details, die den Menschen helfen, zu entscheiden, wohin sie als Nächstes gehen. Do not use it when: Verstecken Sie niemals erforderliche Informationen hinter Hover, da Touch-Geräte diese möglicherweise nicht zuverlässig öffnen. 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): Dies ist kein normativer Standard. Sein Name, seine Grenzen und erwartetes Verhalten können von einer Quelle zur anderen variieren. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Hover-Karte (Hover Card) is used now. Definition: Eine Hover-Karte ist eine reichhaltige Vorschau. Sie öffnet sich, wenn man über eine Referenz fährt oder sie fokussiert, ohne die Seite zu blockieren. 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.