Tooltipps mit CSS

Coding

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:

<style type=”text/css”>
<!–
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active {
position: relative;
text-decoration: none;
font-style: normal;
background: #CCCCCC;
color: #000000;
}


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?

Das sieht so aus:

<a class=”tooltip” xhref=”http://www.webmacherfaq.de/#”>Tooltip<span>Info: Dieser Text könnte jetzt das Wort Tooltip erklären…</span></a>

Es wird ein normaler Link gesetzt, der als ‘tooltip’-Klasse definiert wird. Der Tooltiptext wird in ein <span>-Tag gesetzt.

Sascha

Hauptberuflich "Technologietreiber für Onlinezeugs" in einem Großkonzern. Interessiert an Technik im Allgemeinen, je abgedrehter, umso besser. Neben Familie, Hund und Beruf hat er trotzdem noch Spaß daran Sachen aufzuschreiben, die einem tagsüber so begegnen (manchmal auch nachts ;)).

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.