Skip to main content

We have released KoliBri - Public UI v4 (Next). For the LTS version, see .

Your opinion matters! Together with you, we want to continuously improve KoliBri. Share your ideas, wishes, or suggestions—quickly and easily.

Tooltip

Synonyms: Inline dialog, popover

Die Tooltip-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden. Denn der Tooltip ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird.

The Tooltip component implements the counterpart of the Aria label. It is therefore explicitly intended only to show the label of an element to the user without a screen reader.

An open tooltip can be closed with the 'Escape' key in order to make any overlaid page information visible again.

Note: In order for the tooltip to align correctly, the reference element must not have display: inline.

Accessibility​

The tooltip component is displayed when the focus is on or when the mouse is moved over the reference element and is intended exclusively for the sighted user to be able to read the label (Aria label) without a screen reader. The text of the tooltip cannot be accessed with the keyboard and is also hidden from screen readers using Aria-Hidden.

From an accessibility testing perspective, tooltips can be ignored as long as development also ensures that the tooltip text is read out in the same way by the screen reader.

Width​

The width of the tooltip usually depends on its content. To configure the width of a tooltip, a CSS-Custom-Property can be defined on the surrounding container as follows:

.container {
 --kol-tooltip-width': '40rem';
}

Known issues​

When using CSS contain: layout within the tooltip element, the positioning may be incorrect. The cause is a Bug in floating-ui, which was documented in PR #8062.

Workaround: Do not put contain: layout directly on the tooltip. Instead, the property should only be used where container queries are needed.

Outlook: In the long term, the native anchor() function could be used instead of floating-ui. This is currently only available in Chrome; floating-ui is still required for Firefox and Safari.