Tooltipps mit CSS

Veröffentlicht 15. März 2006 · Aktualisiert 13. Dezember 2021

Ob für einen Link oder eine Textstelle, die erklärungsbedürftig ist: Ein Tooltip hilft hier weiter.
Das Ganze funktioniert allein mit CSS.
Helfen Sie dem Betrachter Ihrer Site und leiten Sie Ihre Tooltips z.B. mit ‚Tip:‘ oder ‚Info:‘ ein.

Wie funktioniert das Ganze nun?

In den Head-Bereich der gewünschten Seite wird folgender CSS-Code hinzugefügt:

a.tooltip:hover {
color: #000000;
background: yellow;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 20px;
left: 0;
width: auto;
z-index: 100;
color: #000000;
border:1px solid #000000;
background: #FFFFCC;
font: 10px Verdana, sans-serif;
text-align: left;
margin: 3px;
padding: 3px;
height: auto;
}

–>
</style>

Was wird hier gemacht?

Man legt fest, was passiert, wenn ein <a>-Tag als ‚tooltip‘-Klasse definiert wurde.
Hier soll die Texthintergrund grau erscheinen, der Text soll schwarz sein (Wir wollen in diesem Beispiel ja nicht wirklich verlinken, sondern nutzen das Ganze nur als Tooltip.).
Wenn sich der Mauszeiger über den Text bewegt (hover) soll der Hintergrund in gelb wechseln.
Die relative Positionierung sorgt an dieser Stelle dafür, dass sich das <span>-Element an der Link-Position orientiert und der Tooltip später auch an der richtigen Stelle erscheint.

Der Tooltip, der im <span>-Tag steht (siehe unten) soll erst dann erscheinen, wenn sich der Mauszeiger darüber bewegt.
Deshalb wird er in der normalen Anzeige ausgeblendet (display: none).
Erst wenn der Mauszeiger über den Text bewegt wird (hover) soll der Tooltip auch erscheinen (display: block).
Die Größe ist hier mit ‚auto‘ dem Text angepasst.
Natürlich könnte auch eine feste Größe gewählt werden.
‚margin‘ und ‚padding‘ sorgen für die Positionierung des Textes im Tooltip-Kasten.

Wie wird der Tooltip im Text eingebaut?