t3n News Entwicklung

CSS3: Individuelle Tooltips ohne JavaScript

CSS3: Individuelle Tooltips ohne JavaScript

Mit Tooltips lassen sich für Links und Bilder, aber auch für andere Inhalte zusätzliche Informationen anzeigen. Wer auf individuell gestaltete Tooltips setzt, muss dank und nicht mehr auf setzen. Mit wenig Aufwand lassen sich selbst gestaltete Tooltips realisieren.

CSS3: Individuelle Tooltips ohne JavaScript

Tooltip und Data-Dashs

Mit den in HTML5 eingeführten Data-Dashs lassen sich individuelle Attribute auf beliebige Elemente anwenden. Diese Attribute können dann über CSS (oder JavaScript) ausgelesen werden. In einem solchen Attribut lassen sich somit auch die Inhalte für die Tooltips ablegen:

<a href="http://www.t3n.de/" data-tooltip="Open. Web. Business.">t3n.de</a>

Mehr muss in HTML für den Tooltip nicht gemacht werden. Alles Weitere erfolgt ausschließlich über CSS3.

CSS3 für Tooltip anpassen

Zunächst einmal müssen alle A-Elemente so angepasst werden, dass sie relativ positioniert werden:

a {
  position: relative;
}

Das ist nötig, um in den nächsten Schritten den Tooltip relativ zu dem A-Element positionieren zu können. Im nächsten Schritt wird über das Pseudoelement „:before“ der Inhalt aus dem Data-Dash-Attribut gestaltet und positioniert:

a[data-tooltip]:before {
  position: absolute;
  left: 0;
  top: -40px;
  background-color: #ff0000;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  padding: 0 15px;
  content: attr(data-tooltip);
  white-space: nowrap;
  display: none;
}

Die gemachten CSS-Eigenschaften platzieren den Inhalt aus dem Attribut „data-tooltip“ in weißer Schrift auf roten Hintergrund mit abgerundeten Ecken über den jeweiligen Link. Damit der Tooltip nur sichtbar wird, wenn man mit der Maus über den Link fährt, wird das Pseudoelement zunächst nicht angezeigt („display: none“).

Wichtig ist, dass der Inhalt immer in einer Zeile angezeigt („white-space: nowrap“) und nicht umgebrochen wird, da der Tooltip ansonsten nicht korrekt dargestellt werden kann. Ebenso wichtig ist eine feste Höhenangabe („height: 30px“) für den Tooltip.

Damit der Tooltip auch noch einen Pfeil bekommt, der nach unten auf den Link zeigt, wird als weiteres Pseudoelement „:after“ erstellt, welches den Pfeil beinhaltet:

a[data-tooltip]:after {
  position: absolute;
  left: 15px;
  top: -10px;
  border-top: 7px solid #ff0000;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  display: none;
}

Ein Pfeil lässt sich per CSS darstellen, indem man drei breite Rahmen setzt („border-top“, „border-left“ und „border-right“), wobei jedoch nur ein Rahmen eine Farbe bekommt und die anderen beiden Rahmen jeweils transparent sind.

Die Eigenschfat „content“ muss gesetzt werden – auch wenn sie leer bleibt –, da sonsten das Pseudoelement nicht dargestellt wird. Auch dieses Element wird zunächst nicht angezeigt.

Im letzten Schritt muss die Darstellung der beiden Pseudoelemente für einen Hovereffekt angegeben werden:

a[data-tooltip]:hover:after, a[data-tooltip]:hover:before {
  display: block;
}

Beim Darüberfahren mit der Maus werden die beiden Pseudoelemente als Blockelemente dargestellt und jeweils oberhalb des Links angezeigt.

CSS3-Tooltip
CSS3-Tooltip

Der CSS3-Tooltip funktioniert in allen aktuellen Browsern. Lediglich der Chrome tanzt ein wenig aus der Reihe. Wird der Link, der den Tooltip auslöst, unterstrichen dargestellt, übernimmt auch der Tooltip diese Unterstreichung. Daher sollte man auf die Unterstreichung von Links verzichten, wenn man CSS3-Tooltips einsetzt.

Tooltip für andere Elemente

Der CSS3-Tooltip lässt sich auch auf andere Elemente anwenden. Dazu müssen diesen Elementen lediglich die entsprechenden Attribute („data-tooltip“) zugewiesen werden; und die CSS-Angaben müsen angepasst werden:

a, span {
  …
}

a[data-tooltip]:before, span[data-tooltip]:before {
  …
}

/* usw. */

Welche Einsatzmöglichkeiten für CSS3 seht ihr noch? Setzt ihr sie bereits ein oder nutzt ihr lieber JavaScript, um solche Effekte einzusetzen?

Weitereführende Links zum Thema CSS3:

Newsletter

Bleibe immer up-to-date. Sichere dir deinen Wissensvorsprung!

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
10 Antworten
  1. von peter am 09.01.2012 (11:35 Uhr)

    dazu habe ich niemals JS verwendet, nur hat das markup etwas anders ausgesehen - \lorem ipsur\tooltip\\ mit
    .tooltop > span { display: none } und .tooltip:hover > span { display: block; position absolute, ... }

    Antworten Teilen
  2. von WalleniuM am 09.01.2012 (11:41 Uhr)

    geht auch HTML im Tooltip? In einem schnellen test habe ich das nicht hinbekommen.

    PS: Bitte unbedingt eine Demoseite bei solchen Artikeln. Das erleichtert das ausprobieren etwas.

    Antworten Teilen
  3. von Denis Potschien am 09.01.2012 (12:05 Uhr)

    @WalleniuM: Hier eine Demo bei JSFIDDLE.

    Antworten Teilen
  4. von Sebastian am 09.01.2012 (12:19 Uhr)

    Endlich erklärt mir mal einer, wie das mit den Pfeilen geht. Kenne die beispielsweise aus Twitters Bootstrap, aber wenn man den Trick nicht kennt, ist es verdammt schwer ihm auf die Spur zu kommen.

    Danke, danke!

    Antworten Teilen
  5. von Patrick am 09.01.2012 (12:42 Uhr)

    Klasse, dass man durch das neue Data-Attribut auch endlich einen sinnvollen Ort hat, wo man die Inhalte für solche, anfangs versteckten, Dinge ablegt.

    Leider fehlt mir die Möglichkeit HTML in den Tooltip zu bekommen. Mehrzeilig sollte der Tooltip auch mal sein. Gibt es dafür auch interessante Ansätze in HTML5?

    Für eine Demo bei solchen Tech-Demos wäre ich auch (:

    Danke für den aufschlussreichen Artikel!

    Antworten Teilen
  6. von Denis Potschien am 09.01.2012 (13:30 Uhr)

    @Patrick: Eine Demo habe ich in den Kommentaren verlinkt (siehe Kommentar 3). Eine Möglichkeit, HTML-Elemente mit in den Tooltips unterzubringen, wird es mit reinem CSS wohl nicht geben. Da müsste man dann doch JavaScript bemühen.

    Antworten Teilen
  7. von peter am 09.01.2012 (14:31 Uhr)

    das geht auch ohne javascript... http://webbe.de/index.shtml?CONTENT=script_css_tooltip;LANG=de
    is sogar ziemlich einfach ;)

    Antworten Teilen
  8. von Robert am 09.01.2012 (14:54 Uhr)

    Cool! Werde ich gleich mal in meinem Blog testen!

    Lässt sich das Problem im Chrome nicht durch ein "text-decoration:none;" im hover-Style beheben? (habs leider selbst noch nicht testen können...)

    Antworten Teilen
  9. von WalleniuM am 09.01.2012 (14:57 Uhr)

    @Denis: Danke, bitte in Zukunft immer im Artikel angeben. Dann sind sie noch besser :)
    Eventuell kannst du deinen Eintrag ja erweitern, wenn das von Peter funktioniert. Muss ich mir mal genauer anschauen.

    Antworten Teilen
  10. von Dirk am 04.07.2012 (21:43 Uhr)

    Hallo,
    ich habe ein Frage dazu:

    Wie bekomme ich in:
    data-tooltip="Open. Web. Business."

    einen Zeilenumbruch in ?

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS3
Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]
Jetzt „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk gratis sichern! [t3n-Aktion]

Wer mobile Anwendungen entwickeln möchte, findet in „Apps mit HTML5, CSS3 und JavaScript“ von Rheinwerk eine hilfreiche Lektüre für den Start. Als Neuabonnent kannst du dich über eines der … » weiterlesen

Ein Amiga-Emulator in HTML5 und JavaScript: Hier zockst du Games-Klassiker online
Ein Amiga-Emulator in HTML5 und JavaScript: Hier zockst du Games-Klassiker online

Hat hier jemand „Nostalgie“ gefordert? Dieser Amiga-Emulator in HTML5 und JavaScript versetzt euch in alte Zeiten zurück. » weiterlesen

anime.js: Schlanke Javascript-Bibliothek für Animationen
anime.js: Schlanke Javascript-Bibliothek für Animationen

Schicke Animationen mit Javascript: anime.js bietet eine überschaubare aber sehr sehenswerte Animations-Library. Wir haben uns die Lib genauer angeschaut: » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?