Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

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 CSS3 und HTML5 nicht mehr auf JavaScript setzen. Mit wenig Aufwand lassen sich selbst gestaltete Tooltips realisieren.

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:

Finde einen Job, den du liebst

10 Reaktionen
Dirk
Dirk

Hallo,
ich habe ein Frage dazu:

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

einen Zeilenumbruch in ?

Antworten
WalleniuM
WalleniuM

@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
Robert

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

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

Antworten
denis.potschien
denis.potschien

@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
Patrick
Patrick

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
Sebastian

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

@WalleniuM: Hier eine Demo bei JSFIDDLE.

Antworten
WalleniuM
WalleniuM

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

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen