Zum Hauptinhalt springen

Abbr

Die Abbr-Komponente implementiert den HTML-Tag abbr, wobei hier jedoch der Tooltip barrierefrei ist. Der Tooltip für die Beschreibung wird bei Focus oder Hover der Abbr-Komponente angezeigt und vorgelesen.

Konstruktion

Code

<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
<p>Ich bin eine <kol-abbr _label="Abkürzung" _tooltip-align="left">Abbr</kol-abbr> mit Tooltip links.</p>

Beispiel

Ich bin eine Abbr mit Tooltip oben.

Ich bin eine Abbr mit Tooltip rechts.

Ich bin eine Abbr mit Tooltip unten.

Ich bin eine Abbr mit Tooltip links.

Verwendung

Angabe der Beschreibung zur Abkürzung

Der Begriff bzw. die Erklärung wird über das Attribut _label übergeben, die Abkürzung bzw. der erklärungswürdige Begriff kommt zwischen die Tags im HTML.

Ausrichtung des Tooltip

Über das Attribut _tooltip-align wird die Positionierung des ToolTip, relativ zur Abkürzung, festgelegt.

Barrierefreiheit

Die Abbr-Komponente wurde von KoliBri umgesetzt, weil der Standard-Tooltip nicht barrierefrei bzgl. der Skalierung ist. Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert seine Größe beim Zoomen korrekt.

Properties

PropertyAttributeDescriptionTypeDefault
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).stringundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'

Slots

SlotDescription
Der Begriff, der erläutert werden soll.

Dependencies

Depends on

Graph


Live-Editor

Beispiele