Komponenten
Help Icons
Ein Fragezeichen-Icon, das eine Erklärung als Tooltip einblendet.
Verwendung
Ein Help Icon ergänzt Beschriftungen um eine kurze Erklärung. Der Tooltip erscheint bei Hover und Tastaturfokus.
<gedisa:help-icon content="Das ist ein Tooltip" />Mit Beschreibung
Mit description erhält der Tooltip einen Nebentext unter dem Titel.
<gedisa:help-icon content="Das ist ein Tooltip" description="Tooltips beschreiben oder benennen ein Element. Sie helfen, Bedeutung, Funktion oder Alternativtext zu verstehen." />Positionen
position und align steuern die Lage des Tooltips. Der Pfeil zeigt immer auf das Icon.
<gedisa:help-icon content="Oben" position="top" />
<gedisa:help-icon content="Unten" position="bottom" />
<gedisa:help-icon content="Links" position="left" />
<gedisa:help-icon content="Rechts" position="right" /><gedisa:help-icon content="Das ist ein Tooltip" align="start" />
<gedisa:help-icon content="Das ist ein Tooltip" align="end" />In Formularen
Formularfelder mit tooltip verwenden das Help Icon automatisch, bei Inputs im Feld und bei Textareas neben dem Label.
<gedisa:input label="E-Mail" tooltip="Wir senden keine Werbung." placeholder="olivia@gedisa.de" />
<gedisa:textarea label="Beschreibung" tooltip="Kurzer Text über das Team." placeholder="Beschreibung eingeben …" />Barrierefreiheit
Das Icon ist ein Button mit dem zugänglichen Namen Hilfe, der Tooltip-Inhalt wird als Beschreibung verknüpft. Mit label lässt sich der Name anpassen.
<gedisa:help-icon label="Hilfe zur E-Mail-Adresse" content="Wir senden keine Werbung." />Referenz
Diese Übersicht umfasst die gezeigten Attribute. Das Help Icon verwendet intern gedisa:tooltip.
gedisa:help-icon
|
Eigenschaft
|
Werte
|
Default
|
|---|---|---|
| content | Titel des Tooltips | |
| description | Nebentext unter dem Titel | |
| position |
top, bottom, left, right
|
top
|
| align |
start, center, end
|
center
|
| label | Zugänglicher Name des Buttons |
Hilfe
|