Heute zeige ich euch einen simplen aber trotzdem coolen Trick, wie man auch ohne Javascript einen Tooltip mit CSS erstellt. Diesen Trick wird der ein oder andere Frontend Entwickler schon kennen, andere vielleicht aber nicht.
Zuerst brauchen wir das Grundgerüst des Tooltips. Hierfür verwenden wir einen einfachen <a> Tag, der einen <span> enthält. Das ganze sieht dann so aus:
<a href="#" class="toolTipLink"> Linktext <span class="toolTip">Dies ist ein Tooltip</span> </a>
Der <span> Inhalt ist dann der eigentliche Tooltip. Dieser wird angezeigt, wenn man über den Link fährt.
Das zugehörige CSS sieht wie folgend aus:
.toolTipLink {
position: relative;
color: #5aa4d7;
}
.toolTipLink span {
display: none;
position: absolute;
top: -40px;
left: -5px;
width: 110px;
padding: 10px;
background-color: #483a2d;
border-radius: 20px;
box-shadow: 0px 0px 10px #555;
color: #FFF;
font: bold 12px arial;
}
.toolTipLink:hover span {
display: block;
}Ich habe das ganze noch durch einen Hintergrundfarbe, Schatten und runde Ecken verschönert. Eine Livedemo findet ihr hier.
Viel Spaß damit.