Tooltip
Die Tooltip-Komponente implementiert das Gegenstück zum Aria-Label. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.
Ein geöffneter Tooltip lässt sich mit der Escape-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.
Hinweis: Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht display: inline haben.
Barrierefreiheit
Die Tooltip-Komponente wird bei Fokus oder bei Bewegen der Maus über dem Referenzelement angezeigt und dient ausschließlich dem/der sehenden Nutzer:in ohne Screenreader die Beschriftung (Aria-Label) lesen zu können. Der Text des Tooltips ist selbst nicht mit der Tastatur erreichbar und zudem mittels Aria-Hidden für die Screenreader versteckt.
Aus Sicht des Barrierefreiheitstests können Tooltips ignoriert werden, solange zudem von der Entwicklung sichergestellt wurde, dass der Tooltip-Text auch in gleicher Weise vom Screenreader vorgelesen wird.
Links und Referenzen
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_align | _align | Defines the alignment of the tooltip in relation to the parent element. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_id | _id | Defines the internal ID of the primary component element. | string | undefined | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
Dependencies
Used by
- kol-abbr
- kol-button-wc
- kol-input-checkbox
- kol-input-color
- kol-input-date
- kol-input-email
- kol-input-file
- kol-input-number
- kol-input-password
- kol-input-radio
- kol-input-range
- kol-input-text
- kol-link-wc
- kol-select
- kol-textarea
Depends on
- kol-span-wc