Tooltip CSS

Ein Tooltip ist ein Container, der weiterführende Inhalte anzeigen kann. In der Regel wird das title-Tag als Tooltip angezeigt. Bei Mouse Over erscheint der hinterlegte Titel des Links in einem - je nach Browser - weißen Kasten über oder unter dem Tag, mit dem title. Wird ein Element (meist Links oder Formularelemente) mit dem Mauszeiger berührt, erscheint der Text des title-Attributs für kurze Zeit und wird dann wieder ausgeblendet.

Durch die kurze Anzeigezeit und die ungleiche Browserkompatibilität des title-Attributes ist es jedoch davon abzuraten, bei der barrierefreien Webseitenumsetzung auf ein Standard-Tooltip bei Mouse Over zu setzen. Für Nutzer von mobilen Endgeräten - ohne Mauszeiger - oder Screenreadern ist das title-Attribut nur unzureichend lesbar.

Mit unserem CSS-Trick lässt sich das auf einfache Art beheben und beliebig weiter manipulieren.

Tooltip Gestaltung mit CSS

Tooltips lassen sich sehr einfach mit CSS gestalten, um mehr Individualität und bessere Lesbarkeit zu schaffen. Damit alle Links mit einem title-Attribut angesprochen werden können, beziehen wir uns auf a[title]

a[title]{
    position: relative;
}
a[title]:before {
    position: absolute;
    left: 0;
    top: -40px;
    background-color: var(--black);
    color: var(--white);
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    padding: 0 15px;
    content: attr(title);
    white-space: nowrap;
    display: none;
}
a[title]:after {
    position: absolute;
    left: 15px;
    top: -10px;
    border-top: 7px solid var(--black);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    display: none;
}
a[title]:hover:after,
a[title]:hover:before {
    display: block;
}

Das Ergebnis kann sich sehen lassen:

Statt des title-Attributes wird jedoch empfohlen ein zusätzliches aria-label oder aria-tooltip-Attribut im Link zu hinterlegen und dieses zusätzlich mit Inhalten zu füllen.