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 |
---|---|---|---|---|
_accessKey | _access-key | Defines the elements access key. | string | undefined | undefined |
_align | _align | Defines the alignment of the tooltip, popover or tabs in relation to the 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
- kol-link-wc
Depends on
- kol-span-wc