Frisch notiert!
Die neusten Artikel aus unserem Blog.

CSS Profi-Tip: Tooltip mit purem CSS und data-Attributen erstellen

von Adrian Lambertz / Zuletzt aktualisiert am 11/08/2016 / Webdesign / 13
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.

Quelle: http://codepen.io/css-tricks/full/wFeaG


Adrian Lambertz

Seit 2010 bin ich nun schon bei Pixelbar mit dabei. Zuerst als Auszubildender und nach erfolgreichem Abschluss meiner Ausbildung als Frontend-Entwickler.

Ohne Musik und Kaffee kann ich nicht leben, daher konsumiere ich beides während der Arbeit praktisch durchgehend :).

Daneben liebe ich WordPress – darauf habe ich mich spezialisiert.

Weitere Beiträge von adrian anzeigen

13 Kommentare

  1. 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

  2. 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 ;-)

      • Christian Mueller

        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;
        }

  3. 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!

  4. Ricardas

    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

Hinterlasse einen Kommentar zu Detlef

Hier klicken, um das Antworten abzubrechen.