CSS Profi-Tip: Tooltip mit purem CSS und data-Attributen erstellen
Jedem Webentwickler sollte www.css-tricks.com zumindest ein Begriff sein. Auf dieser Seite findet man massig nützliche CSS Tips, Tricks und Informationen. Heute stieß ich dort auf einen absoluten Profitipp: das erstellen eines Tooltips mit purem CSS und ohne JS/jQuery.
Diesen Tipp wollte ich euch natürlich nicht vorenthalten.
Tooltips sind überaus nützliche kleine Hilfestellungen in Form von kleinen Popup-Fenstern, die bei Hovern eines Elementes erscheinen. Sie enthalten meist Erklärungen zu dem Element, auf welches gehoverd wird (egal ob Text oder grafisches Element) und erhöhen somit die Benutzerfreundlichkeit.
Bisher war das erstellen eines individuellen, gut aussehenden Tooltips oft mit Aufwand verbunden und setzte Javascript (meist in Form von jQuery) voraus. Mittlerweile geht dies pur über CSS. Auch mit tollen Effekten/Animationen.
Genug erzählt, ran an den Speck! Auf folgendem JSFiddle findet Ihr alles, was ihr braucht:
http://jsfiddle.net/cxSc9/1/
Das benötigte HTML Markup
Für den Tooltip benötigt Ihr nur einen Link, der mit einem Data-Attribut ausgestattet ist. Damit der Tooltip nicht auf jeden einzelnen Link greift, den Ihr im Text einfügt, habe ich ihm noch die Klasse „tooltip“ verpasst.
<a href="#" class="tooltip" data-tooltip="Ist das nicht ein toller Tooltip! So informativ!">
Stet clita kasd gubergren
</a>Das Attribut „data-tooltip“ wird für den Inhalt des Tooltips benötigt. Fügt in diesem Attribut also ein, was in dem Tooltip angezeigt werden soll.
Das CSS
Das folgende CSS ist schon nicht wenig, aber sehr mächtig. Erklärungen findet ihr unterhalb des Blockes.
a.tooltip {
position: relative;
text-decoration: none;
}
a.tooltip:after {
content: attr(data-tooltip);
position: absolute;
bottom: 130%;
left: 20%;
background: #ffcb66;
padding: 5px 15px;
color: black;
-webkit-border-radius: 10px;
-moz-border-radius : 10px;
border-radius : 10px;
white-space: nowrap;
opacity: 0;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
a.tooltip:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 20px solid #ffcb66;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
opacity: 0;
left: 30%;
bottom: 90%;
}
a.tooltip:hover:after {
bottom: 100%;
}
a.tooltip:hover:before {
bottom: 70%;
}
a.tooltip:hover:after, a:hover:before {
opacity: 1;
}Ihr seht, das CSS macht massiv gebrauch von den Pseudoelement :before und :after. Dem :after des .tooltips geben wir mit der „content: attr(data-tooltip);“ Anweisung den Inhalt des in dem Attribut „data-tooltip“ weiter. Die restlichen Styles beziehen sich hautpsächlich auf die Positionierung und dem Aussehen des Tooltips. Also nicht magisches.
Das :before Element wird über den CSS-Border-Triangle Trick (klick hier für den Generator) zum kleinen Dreieck, welches unterhalb des Tooltips angezeigt wird.
Die weichen Bewegungen werden über CSS-Transitions erstellt.
Das Javascript
„Was? Wie nun Javascript? Ich dachte der Tooltip kommt ohne aus?“
… Genau! :-)
Fazit
Ohne viel Aufwand und vor allem nur über HTML/CSS könnt ihr nun chick aussehende und informative Tooltips erstellen! Dies gilt natürlich nur für aktuelle Browser, die eine ordentliche CSS3 Unterstützung haben.
moin moin,
sehr lange suche ich nun einen Layer der auf Klick anzeigt wird und den Inhalt einer bestimmten Seite aus dem gleichen Verzeichnis zeigt. Das Script habe ich noch, allerdings ist es mit der zeit unvollständig bzw beschädigt. Habt Ihr etwas ähnlich auf Lager?
Ich Danke für Eure Mühe …
MfG
Jenner
Hey jenner, so direkt nicht, nein… Spontan fällt mir da aber die jQuery .load Funktion ein… Damit kannst du Seiten laden und deren HTML in einen Container pfeffern….
Hallo,
danke für die informative Seite. Leider ist der Tooltip aber nicht ohne Makel. Wenn man sich dem Link von oben nähert, dann wird er schon sichtbar weit bevor man im Hoverbereich ist…
Gibts dafür eine Lösung? Sont werde ich doch auf das gute, alte Javascript zurückgreifen. ;-)
Viele Grüße
So direkt sehe ich da keine Lösung – war mir vorher allerdings nie aufgefallen… Wenn du auf die Animation verzichten kannst, arbeite doch mit display:none und :block anstatt mit opacity. Natürlich nicht das gelbe vom Ei! :-) Ansonsten bleibt nur, wie du auch schon sagst, das gute alte Javascript ;-)
Ich hatte das Problem auch und habe auch eine Lösung gefunden.
Man darf nicht „opacity“ verwenden, sondern „Display:none“ und „Display:block“.
Meine Komplettlösung sieht so aus:
.tooltip:before {
content: „“;
position: absolute;
right: 280px;
margin-top: 20px;
opacity: 0.85;
width: 0; height: 0;
border-bottom: 8px solid #ffcb66;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
display:none;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
}
.tooltip:after {
content: attr(data-tooltip);
position: absolute;
right: 200px;
width: 400px;
background: #ffcb66;
padding: 5px 5px;
color: black;
margin-top: 14px;
opacity: 0.85;
-webkit-border-radius: 5px;
-moz-border-radius : 5px;
border-radius : 5px;
white-space: wrap;
display:none;
-webkit-transition: all 0.4s ease;
-moz-transition : all 0.4s ease;
transition : all 0.4s ease;
font-size: 14px;
}
.tooltip:hover:after, .tooltip:hover:before {
display:block;
}
Hier als Fiddle:
http://jsfiddle.net/smoki99/ur437g6L/
Man kann im CSS ::before und ::after mit pointer-events: none; ergänzen. Dadurch werden Mouse-Events auf diesen Elementen ignoriert und die Maus zielt stattdessen weiterhin auf die darunterliegenden Elemente. Weitere Informationen unter https://developer.mozilla.org/de/docs/Web/CSS/pointer-events
Hey Fabrice – doch das geht auch mit Transition und zwar über z-index.
Den Tooltip mit z-index:-1 verstecken. Dann reagiert die Box nicht mehr auf den Cursor.
a.tooltip:after{z-index: -1; }
Beim Hover den Tooltip wieder nach vorn holen:
a.tooltip:hover:after, a.tooltip:hover:before {z-index: 1;}
Man darf nur keinen hohen z-index-wert nehmen, wie zB -99. Sonst floppt er wieder nach vorne ohne Transition wie mit Display:block.
Viel Spaß und viele Grüße
Der Stilknecht
Hi Adrian,
danke für die gute Anleitung! Zwei Sachen dazu: Der Link, den Du als Quelle angibst, führt zu einer seltsamen Unterseite. Da muss wohl alles ab dem vorletzten Slash raus, oder?
Und ich habe eine Frage: Wenn ich statt eines Textes ein Bild in den Tooltip einstellen will, wie mache ich das? Bin nicht gerade ein CSS-Profi und probiere schon die ganze Zeit rum, klappt aber nicht … Hast Du einen Tipp? Vielleicht interessiert das ja auch noch andere.
Viele Grüße!
Hi, nein, hier ist alles richtig… Zu welcher Seite wirst du denn geleitet?
Ein Bild in den Tooltip zu setzen ist soweit ich weiss pur mit CSS nicht zu machen. Dafür musst du auf das gute alte Javascript setzen…. z.B. folgende jQuery Plugin: http://iamceege.github.io/tooltipster/
Hallo Adrian,
genau so etwas habe ich gesucht um weniger JS laden zu müssen.
Sag mal, ich bin kein besonderer CSS-Mensch, ich habe mit dem Tooltip nur ein kleines Problem, besser gesagt 3 kleinere. :)
1.) Ist es möglich das der tooltip auch Text umbricht? Sprich das eine Möglichkeit ist das der Tip z. Bsp. nur 150px brei ist und Höhe sich anpasst je nach Inhalt? (Wichtigster Aspekt da die tiptexte nicht aus 2-3 Wörtern bestehen.)
2.) Ist es möglich das der tooltip mit einem Link versehen werden kann? Sprich, ich verlinke in dem Tooltip, nicht in dem Seitentext? Dann kann der Leser besser entscheiden per klick on weiterleitung oder nicht.
3.) Ist es möglich den Tooltip um ein Bild zu erweitern? Sprich, links oder rechts ein Bild, vielleicht eine Trennlinie dazwischen oder keine, dann etwas Text dazu, villeicht einen Link im text dazu. Bild vielleicht aus als Panorama max. 150x40px oder Thumbnail 50x50px oder so.
Adrian, eine Menge Fragen, aber ich bin ehrlich gesagt scharf darauf den Tooltip zu nutzen, er gefällt mir echt bisher am besten von allem was es im netz so gibt.
ich danke schon einmal vorab für die Antwort, :) egal wie sie wird. Ich weiß, man kann nicht alles haben, aber Fragen kostet nichts. :)
LG
Ricardas
Hallo Ricardas,
schaue mal hier: http://jsfiddle.net/cxSc9/72/
Den Text kann man umbrechen lassen, ja. Da einfach im CSS das nowrap rausnehmen und eine Breite setzen. Innerhalb des Tooltips kann man aber soweit ich das so aus dem Stegreif sagen kann weder verlinken noch ein Bild reinsetzen. Das schaue ich aber nochmal genauer nach :-)
Eine sehr gute Anleitung zum Tooltip, Habe ich gerade bei einem Projekt gebraucht. In der Vergangenheit schonmal erstellt, aber wieder vergessen….
Mit den Editor von Imagemarker.com kann man ganz einfach Tooltips mit Texten, Videos, Verlinkungen etc. erstellen.
Habe Tooltip für einen Link verwendet. Beispiel: meinLinkText und mit Nu Html Checker -https://validator.w3.org/#validate_by_input- geprüft. Leider Fehler(!):
Error: Start tag a seen but an element of the same type was already open.
Error: Stray end tag a.
Also ist der Tooltip für diesen Fall nicht w3 tauglich (obwohl er sehr gut funktioniert!).
Habt Ihr irgendeinen Tipp oder Ratschlag dazu? Oder mache ich etwas falsch?
Beste Grüße
Tommi
P.S.: … und Danke für den (eigentlich) tollen Tooltip!
Hallo tommi,
ein <a> in einem <a> Tag ist unzulässig, da du damit einen Link in einem Link platzierst.
Entferne also mal das <a href=“#“ rel=“nofollow“> und das letzte </a>. Dann ists korrekt :-)
Wo ist denn der Link zum Artikel von CSS-Tricks? Ich würde doch gerne mal sehen, ob hier der Original-Code von dort eingebunden wurde bzw würde in so einem Artikel mit möglicherweise geklautem Code doch erwarten, daß die Unterschiede im Code deutlich gekennzeichnet werden.
Hallo,
steht doch am Ende des Beitrages:
Quelle: http://codepen.io/css-tricks/full/wFeaG
Das ist der Pen von CSS-Tricks.
Hi geht das auch wenn man auf den Text mit der Mouse geht das ein Bild erscheint!
Lieben Gruß
Jasmin