Frisch notiert!

Die neusten Artikel aus unserem Blog.

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

Zuletzt aktualisiert am 11/08/2016 von Adrian Lambertz
19 Kommentare
Webdesign
/ Webdesign / 19

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

19 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

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

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

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

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

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

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

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

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

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert