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 | Setzt die Ausrichtung des Tooltips in Relation zum Elternelement. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_id (required) | _id | Gibt die ID an, wenn z.B. Aria-Labelledby (Link) verwendet wird. | string | undefined |
_label (required) | _label | Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird. | string | undefined |
Dependencies
Used by
- kol-abbr
- kol-button-wc
- kol-link-wc
Depends on
- kol-span-wc