Tooltips nur mit CSS 3

Sticky-Tooltips, die ich bisher nutzte, benötigen JavaScript und sind aus dem Jahr 2009. Eigentlich nicht weiter schlimm, nur fiel jetzt auf, dass Browser auf Smartphomes und Tablets, selbst in den neuesten Versionen, dieses teilweise nicht (mehr) anzeigen.

Also suchte ich nach einer anderen Lösung und fand diese hier.

Am PC funktioniert das mit mouseover (überfahren mit der Maus), bei Smartphones oder Tablets bei Anklicken mit dem Finger (oder Stift); der Tooltipp bleibt dann länger lesbar.

Ich habe sie auf meine Bedürfnisse angepasst. Den Code kopierte ich danach ans Ende in der Datei stylesheet.css :

/* Start - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */
/* Tooltip container */
.tooltip {
position: absolute; /*relative; */
display: inline-block;
cursor: help; /* Cursoer verändert Aussehen zu einem "Pfeil mit ?" */
border-bottom: none; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
max-width: auto; /* 120 px oder 400px; */
height: auto;
background-color: #0057b0;
color: #fff;
text-align: center; /* Textausrichtung in der Box */
padding: 5px;
margin: 4px;
border-radius: 6px;

/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}

/* Tooltip unterhalb des Wortes */
.tooltip .tooltiptext {
max-width: auto; /* 120 px oder 400px; */
height: auto;
top: 100%;
left: 50%;
margin-left: -40%; /* Use half of the width (120/2 = 60), to center the tooltip */
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #0057b0 transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
/* Ende - Tooltip CCS3: www.w3schools.com/css/css_tooltip.asp */

Beispiel-Seite 1, Beispiel-Seite 2, Beispiel-Seite 3, Beispiel-Seite 4, teilweise mit weiteren Elementen auf kramlade.de.

Damit es funktioniert, muss das verwendete Template diesen Code in der Stylesheet enthalten.

1. Beispiel (Der Tooltipp-Text ist in beiden Beispielen gleich lang!):
Dann wird auf der entsprechenden Seite ein Text verfasst und dieser Code im Quelltext-Fenster des Editors an der entsprechenden Stelle eingefügt:

<p><strong>1. Beispiel</strong> (<span style="color: #ff0000;">Der Tooltipp-Text ist in beiden Beispielen gleich lang!</span>)<strong>:</strong></p>
<center>
<div class="tooltip">Du brauchst einen <strong>Tipp</strong>?<span class="tooltiptext">Um dieses Ergebnis angezeigt zu bekommen.</span></div>
</center>

Das Ergebnis siehst du unter diesem Kasten.

Da der Tooltip nach unten klappt, setze ich hinter das letzte schließende < /div> (am Seitenende!) noch mindestens 2 x eine Leerzeile ein, so dass noch genügend Platz zum unteren Browserrand ist. Weiter oben wird Text auf alle Fälle verdeckt.

Der Tooltip variiert in der Größe. Diese richtet sich nach der Länge der Zeile, für die dieser Tipp angedacht ist. Ist sie kurz, so wird der Tipp mehrzeilig. Ist die Zeile lang, ist der Tipp dann auch lang und evtl. nur einzeilig.

Das Beispiel von oben greife ich jetzt noch mal auf und verlängere die „Fragezeile”.

2. Beispiel (Der Tooltipp-Text ist in beiden Beispielen gleich lang!):

Überfahre den folgenden Satz mit der Maus:
<div class="tooltip">Du brauchst doch noch einen kleinen Tipp von mir, um zu verstehen?<span class="tooltiptext">Um dieses Ergebnis angezeigt zu bekommen.</span></div>
Das Ergebnis siehst du unter diesem Kasten.

Letzte Bearbeitung: 2. August 2025 um 09:30