Tooltips mit CSS3 ohne Javascript

Heute ist es sehr einfach Tooltips nur mit CSS3 zu realisieren, ohne auf JavaScript zurück zu greifen.

Tooltips sind in der heutigen Zeit sehr wichtig um den Nutzer weitere Informationen geben zu können, damit für Ihn die Nutzung der Webseite vereinfacht wird. Früher musste man, um Tooltips zu erstellen, auf JavaScript zurückgreifen. Dabei besteht aber die Gefahr, dass der Nutzer JavaScript auch deaktivieren kann und somit der Tooltip nicht angezeigt wird.

Tooltips mit CSS3 erstellen

Als erstes erstellen wir einen Link. Dieser Link muss relativ positioniert werden, da ansonsten der Tooltip nicht angezeigt wird.

<p>Sie finden einen Tooltip <a href="http://www.der-internetblog.de/" data-tooltip="Ein gestalteter Tooltpp">hinter diesen Link</a></p>

Mit den Psydoklassen :before und :after fügen wir nun den Tooltip hinzu. Dieser wird absolut positioniert. Mit einem Negativen Wert von top können wir den Tooltip auch über halb des Elementes positionieren. Das :after Element erzeugt einen kleinen Pfeil, so dass der Tooltip auch dem Element zugeordnet werden kann.

a[data-tooltip]:before {
  position: absolute;
  left: 0;
  top: 27px;
  background-color: #3D3D3D;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  border-radius: 6px;
  padding: 0 25px;
  content: attr(data-tooltip);
  white-space: nowrap;
  display: none;

}

a[data-tooltip]:after {
  position: absolute;
  left: 15px;
  top: 20px;
  border-bottom: 7px solid #3D3D3D;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: " ";
  display: none;

}

Nun muss der Tooltip nur noch sichtbar gemacht werden, wenn die Maus über das den Link geht:

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

Tooltips auch für andere Elemente

Sie können die Tooltips auch für andere HTML Elemente wie DIV oder auch span Elemente benutzen.

SEO Eigenschaften der Tooltips

In wie weit die Data Attribute von Google ausgelesen werden, weiß ich zu diesem Zeitpunkt leider nicht. Jedoch werden Inhalte, die über :before und :after auf der Webseite angezeigt werden, leider nicht von Google indiziert. Dies sollte jedoch kein Problem darstellen, da die Tooltips nicht für Google gedacht sind, sondern für den Nutzer der Webseite. Dieser hat eine bessere Nutzererfahrung und verweilt so länger auf der Seite, was für Google ein gutes Signal ist.

Unterstützung von Browsern

Alle modernen Browser, und auch sehr viele ältere, unterstützen die content Eigenschaft in CSS. Auch die Funktion attr(); wird von diesen Browsern unterstützt. Einzig der IE 8 bietet nicht die volle Unterstützung, wie man auf Caniuse nachlesen kann.

Code auf Codepen:

See the Pen Kpeaja by Marcel Stermann (@der-internetblog) on CodePen.

Schreibe einen Kommentar

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

Mit der Nutzung dieser Webseite stimmen Sie zu, dass die Webseite Cookies nutzt. Mehr Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen