Tooltip Popups

Die tooltip Komponente zeigt einen kurzen Erklärungstext an, wenn der Mauszeiger über ein Element geführt wird. Kann verwendet werden, um Beschriftungen von Schaltflächen, Symbolen oder anderen UI-Elementen zu verdeutlichen, die möglicherweise mehrdeutig sind.

Tooltips should contain only short text (usually one word). For longer content or interactive elements, use the popover component instead.

WCAG AA

JavaScript

Funktionen

Durch Mauszeiger ausgelöst: Wird angezeigt, wenn der Mauszeiger darüberfährt, und verschwindet, wenn der Mauszeiger entfernt wird.
Nicht blockierend: Schwebt über dem Inhalt, ohne das Layout zu stören.
Automatische Positionierung: Passt sich so an, dass es innerhalb des Ansichtsbereichs sichtbar bleibt.

RTL

Verwendung

Um ein Tooltip zu einem Element hinzuzufügen, müssen diese lediglich das Attribut data-insight-tooltip, dessen Wert der anzuzeigende Text im Tooltip ist.

<button data-insight-tooltip="This is a tooltip." data-show-arrow="true" data-position="bottom" class="btn btn-primary" > Click me! </button>

Parameter

Name	Typ	Beschreibung	Standardwert	Erforderlich
data-insight-tooltip='<text>'	str	Zeigt beim Hovern über das Element einen Tooltip mit dem angegeben Text an.	''	False
data-position='<position>'	str	Bestimmt, wo im Bezug auf das Element der Tooltip angezeigt werden soll. Mögliche Werte sind: 'top' (darüber), 'bottom' (darunter), 'right' (rechts), und 'left' (links).	''	False
data-show-arrow	bool	Zeigt am Rand des Tooltips einen Pfeil hin zum auslösenden Objekt an.	False	False
data-follow-mouse	bool	Der Tooltip folgt der Mausposition.	False	False

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)