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.
Im neuen Template kam er nun stattdessen in user.css. So ist das ganze übersichtlicher.
Beispiel-Seite 1, Beispiel-Seite 2, Beispiel-Seite 3, Beispiel-Seite 4, teilweise mit weiteren Elementen.
Damit es funktioniert, muss das verwendete Template diesen Code in der Stylesheet enthalten.
Dann wird auf der entsprechenden Seite ein Text verfasst und dieser Code im Quelltext-Fenster an der entsprechenden Stelle eingefügt:
1. Beispiel (Der Tooltipp-Text ist in beiden Beispielen gleich lang!):
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.
|
Überfahre den folgenden Satz mit der Maus: <div class="tooltip">Du brauchst doch einen <strong>Tipp</strong> für Zeile 3, um auf das Ergebnis zu kommen? <span class="tooltiptext">Zeile 3: alle Zahlen, die ein «e» enthalten.</span> </div> |
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!):