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.

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.

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.

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?