1-image 2-image 3-image
Sie sind hier: Startseite > Tooltips

Tooltips nur mit CSS3

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!):

Du brauchst einen Tipp?Um dieses Ergebnis angezeigt zu bekommen.

 

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.

<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!):

Du brauchst doch noch einen kleinen Tipp von mir, um zu verstehen?Um dieses Ergebnis angezeigt zu bekommen.

 

 

Letzte Bearbeitung:
Please activate JavaScript in your browser.

» Sitemap

Einige Bereiche dieser Website benötigen zu ihrer Funktion sogenannte SESSION-Cookies, die jedoch keine personenbezogenen Daten enthalten, die sich auf Sie, Ihren Webclient oder Ihr Gerät beziehen. Es werden nur seiteninterne Werte gespeichert. Bitte geben Sie Ihre Erlaubnis, weitere Cookies auf Ihrem Rechner zu platzieren. Mehr Info