Popover vs. Tooltip
Ein Tooltip gibt einen kurzen Hinweis. Ein Popover kann mehr Text, Optionen oder Buttons enthalten.
Verwenden Sie ein Tooltip, wenn wenige Wörter ausreichen. Verwenden Sie ein Popover, wenn eine Person mehr lesen oder tun muss, ohne die Seite zu verlassen.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Popover
Ein Popover ist ein kleines Panel, das mit dem Steuerelement verbunden ist, das es geöffnet hat. Es kann strukturierte Inhalte und Aktionen aufnehmen, ohne die Seite zu blockieren.
popover attribute / PopoverWählen Sie ein Avatarbild, um ein kleines Profil zu öffnen. Es zeigt die Rolle der Person, Kontaktdetails und eine Folgen-Aktion.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn der Inhalt neben seinem Auslöser gehört und die Menschen die Seite weiterhin verwenden können.
- Nutze es nicht, wenn
- Verwende es niemals für einen kurzen Hinweis, der nur ein Label enthält. Verwende stattdessen ein Tooltip.
- In Code verwendeter Name
popover attribute / Popover
Quickinfo
Ein Tooltip ist ein kurzer Hinweis zu einem Bedienelement. Er öffnet sich, wenn die Maus darüber schwebt oder die Tastatur das Element fokussiert. Leute können ihn nicht wie einen Button nutzen.
role="tooltip"Wenn eine Symbolschaltfläche den Tastaturfokus erhält, erscheint „Link kopieren“. Der Fokus bleibt auf der Schaltfläche.
- Verwenden Sie es, wenn
- Verwenden Sie es, um eine kurze Steuerbeschriftung sowohl beim Mouse-Hover als auch beim Tastaturfokus zu erklären.
- Nutze es nicht, wenn
- Legen Sie niemals Aktionen, unbedingt zu lesende Anweisungen oder lange Inhalte in ein Tooltip.
- In Code verwendeter Name
role="tooltip"
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| PopoverPopover | Verwenden Sie es, wenn der Inhalt neben seinem Auslöser gehört und die Menschen die Seite weiterhin verwenden können. | Verwende es niemals für einen kurzen Hinweis, der nur ein Label enthält. Verwende stattdessen ein Tooltip. | popover attribute / Popover |
| QuickinfoTooltip | Verwenden Sie es, um eine kurze Steuerbeschriftung sowohl beim Mouse-Hover als auch beim Tastaturfokus zu erklären. | Legen Sie niemals Aktionen, unbedingt zu lesende Anweisungen oder lange Inhalte in ein Tooltip. | role="tooltip" |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Popover (Popover), Quickinfo (Tooltip) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Tooltip gibt einen kurzen Hinweis. Ein Popover kann mehr Text, Optionen oder Buttons enthalten. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.