Skip to main content

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 _title="Abkürzung" _tooltip-align="top">Abbr</kol-abbr> mit Tooltip oben.</p>
<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="right">Abbr</kol-abbr> mit Tooltip rechts.</p>
<p>Ich bin eine <kol-abbr _title="Abkürzung" _tooltip-align="bottom">Abbr</kol-abbr> mit Tooltip unten.</p>
<p>Ich bin eine <kol-abbr _title="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 _title ü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
_title (required)_titleDieses Property gibt die Beschreibung oder Erläuterung der Abkürzung an.stringundefined
_tooltipAlign_tooltip-alignGibt an, ob der Tooltip entweder oben, rechts, unten oder links angezeigt werden soll."bottom" | "left" | "right" | "top" | undefined'top'

Slots

SlotDescription
Der Begriff, der erläutert werden soll.

Dependencies

Depends on

Graph


Live-Editor

Beispiele