Warning: A non-numeric value encountered in /kunden/439622_40885/webseiten/internetblog/wordpress/wp-content/plugins/eu-cookie-law/class-frontend.php on line 122

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.


Warning: count(): Parameter must be an array or an object that implements Countable in /kunden/439622_40885/webseiten/internetblog/wordpress/wp-includes/class-wp-comment-query.php on line 399

Schreibe einen Kommentar

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

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

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close