Aufklappbare Infoboxen gehören zu den immer wieder gefragten UI-Elementen. Bis jetzt wurden sie mit viel CSS und sogar JavaScript nachgebaut, bzw. gab es in diversen Frameworks voneinander abweichende Implementierungen.

Jetzt gibt es eine Native Umsetzung in HTML, die von der open-ui.org entworfen und zur Standardisierung vorgeschlagen wurde:

Mit nur wenigen Zeilen HTML bauen Sie ein Popover:

Tooltipp

<button popovertarget="t1">Tooltipp</button>
<div id="t1" popover>
    Infobox, die zusätzliche Informationen enthält.
</div>  

Auch eine Lightbox ist so möglich:

X .

Und das Gute - Es wird bereits von vielen Browsern unterstützt, für den Firefox gibt es einen Polyfill:

Mehr erfahren Sie in unserem neuen Tutorial: Tooltips mit Popover

Warum nicht mit ein bisschen CSS selbst einen Tooltip bauen?

Dafür müsste man ein Element mit :hover oder :focus sichtbar machen, absolut positionieren und dann noch an den z-index denken. Doch nicht so einfach, oder?

Im neuen Popover sind solche Dinge und die Fokusverwaltung bereits integriert.