CSS3 eröffnet ganz neue Möglichkeiten und macht bei einigen Features auf Websites Javascript überflüssig. Ich bin grundsätzlich ein Freund davon, Lösungen ohne Javascript zu finden, wenn CSS3 es ermöglicht. Man findet im Internet einen riesigen Haufen an Javascript und jQuery-Plugins für Tooltips, doch meiner Meinung nach, sollte man hier lieber zu einer CSS3-Lösung greifen. Wie smart und unkompliziert das ganze funktioniert, möchte ich in diesem Beitrag zeigen.

Das Markup (HTML-Code)

CSS3 erlaubt uns das Markup beziehungsweise den HTML-Code unglaublich schlicht zu halten, im folgenden Beispiel verzichte ich auf Steuerklassen, da dies meiner Meinung nach in den meisten Fällen nicht nötig sein wird. Stattdessen wrappen wir einfach das Wort, die Phrase oder das Element in ein span-Element, welchem wir ein data-tooltip-Attribut mitgeben, welches als value den Tooltip-Text enthält.

Das Markup sieht dann also so aus: <span data-tooltip="This is a tooltip text.">Hover here</span>

Das Hover-Event

Wir sollten den User aufmerksam darauf machen, dass das Mouseover-Event triggert, somit setzen wir aus UX-Gründen in unserem Beispiel eine gestrichelte Linie unter unser span. Desweiteren geben wir dem User ein am Cursor ein Feedback, dass ein Event getriggert hat.

Sehr wichtig ist auch auch noch, dass wir die Position der Hover-Fläche auf relative setzen, damit wir unseren Tooltip daran orientieren können.

Achtung: Wir sollten keinesfalls alle span-Elemente selektieren, stattdessen nutzen wir einen eleganten CSS3-Attribut-Selektor und gewährleisten so auch eine reibungslose Nutzung in CSS2-fähigen Browsern.

[data-tooltip] {
    border-bottom: 1px dashed #666;
    cursor: help;
    position: relative;
}

Das Tooltip

Das Tooltip bilden wir mit den Pseudoelementen :before und :after, das :before-Element nutzen wir für einen kleinen Pfeil am oberen Rand der Tooltip-Box und im :after-Element zeigen wir den im data-Attribut gesetzten Text an.

Als erstes jedoch kümmern wir uns um die absolute Positionierung der beiden Pseudoelemente. Um das Tooltip mittig zu platzieren bedarf es einen kleinen CSS-Trick. Normalerweise zentriert man absolute Elemente mit left: 0; right: 0; margin: auto;, doch dies funktioniert nur dann, wenn das zentrierte Element zwingend kleiner ist als sein relatives Eltern-Element. Dies ist hier nicht der Fall, oftmals sieht man für dieses Problem im Internet Workarounds wie left: -500%; right: -500%; margin: auto;. Dies mag in den meisten Fällen funktionieren, aber auch hier ist man auf das 10-fache vom relativen Element beschränkt.

Anstatt die Minuszahlen unnötig groß werden zu lassen können wir mit einem einfachen Trick arbeiten: Wir setzen unser absolutes Element left: 50%;, so dass der linke Rand des Elements genau zentriert zum Relativ-Element sitzt. Jetzt kommen wir mit transform: translateX(-50%); um die Ecke und verschieben das Absolut-Element um genau seine Hälfte der Länge nach links.

Genau das machen wir mit den Tooltips, geben noch ein bisschen box-shadow hinzu und fügen noch eine kleine transition nach unten anbei.

[data-tooltip]:before, [data-tooltip]:after {
    content: '';
    transform: translateX(-50%);
}

[data-tooltip]:hover:before, [data-tooltip]:hover:after {
    position: absolute;
    left: 50%;
    box-shadow: 4px 4px 8px rgba(0,0,0,.3);
    transition: transform 0.3s ease;
    transform: translateX(-50%) translateY(5px);
}

Das :before-Element (Der Pfeil)

Den Pfeil am Tooltip bilden wir nicht mit einem Bild, da es den Pageload unnötig in die Länge ziehen würde. Stattdessen nehmen wir ein 0 Pixel x 0 Pixel großes Element und fügen clever einen border an. Der border-bottom endet an den Ecken diagonal, so dass man bei transparentem border an den Seiten ein Dreieck erzeugen kann.

[data-tooltip]:hover:before {
    content: '';
    border-width: 0 5px 5px 5px;
    border-style: solid;
    border-color: #383838 transparent;
    top: 100%;
}

Das :after-Element (Der eigentliche Tooltip)

Dem :after-Element geben wir einen Attribut-Content, der leider oftmals nicht bekannt ist. Durch content: attr(data-tooltip); können wir den Wert des data-Attributes ausspielen. Genau das machen wir und designen das kleine Pseudoelement ganz nach unseren Wünschen und platzieren es genau unter den Pfeil; Die CSS3-Calc-Funktion hilft uns dabei.

Mit white-space: nowrap; stellen wir sicher, dass der Text innerhalb des Tooltips nicht umbricht.

[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    top: calc(100% + 5px);
    background: #383838;
    color: #fff;
    text-shadow: 0 -1px 0 #000;
    padding: 8px;
    white-space: nowrap;
}