Wie Sie 4 einfache Tooltipps nur mit CSS erstellen

Anleitung zur Erstellung von Pure CSS Tooltipps

Screen

Heute möchte ich Ihnen aus der riesigen Auswahl von coolen CSS-Experimenten eine Anleitung zur Erstellung eines CSS-Tooltips vorstellen und im Anschluss an das Kurz-Tutorial zum Gratis-Download anbieten.

Was sind Tooltipps

Tooltipps sind sogenannte »Quickinfos« oder »Kurzinfos«, welche dem Benutzer mehr Infos geben sollen. Sie werden zum Beispiel in Browsern zur Beschreibung von Links oder zur Erklärung von Icons, d.h. Symbolen oder z.B. Bildern in Computerprogrammen, verwendet und erscheinen, wenn der Mauszeiger über das entsprechende Objekt fährt oder eine gewisse Zeit über dem Objekt verbleibt.

Das Erstellen eines individuellen, gut aussehenden Tooltipps war oft mit großem Aufwand verbunden und setzte Javascript (meist in Form von jQuery) voraus. Mittlerweile geht dies viel einfacher und schneller nur über CSS. Und das auch noch mit vielen tollen Effekten/Animationen.

Fertiges Beispiel ansehen bzw. herunterladen

Demo | Download

Mein Beispiel für ganz einfache Tooltipps nur mit CSS

Ich zeige ihnen im Musterbeispiel 4 Tooltipps, wobei das HTML-Grundgerüst immer gleich bleibt und nur die CSS-Anweisungen je nach Ausrichtung (oben, unten, rechts, links) geändert werden müssen.

Demo ansehen:

Demo

HTML-Code:

Pure CSS Tooltips

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud Tooltip oben laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Tooltip on unten fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tooltip rechtsDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu Tooltip links

CSS-Anweisungen:

Hauptanweisungen :

body {
width: 600px;
margin: 100px auto;
}
p {font-size: 24px;}

/* Some basic styling to notify users
   about the tooltips*/
.tooltip {
  color: #900;
  text-decoration: none;
}

.tooltip:hover {
  color: red;
  position: relative;
}

CSS-Tooltip oben

/* Tooltip on Top */
.tooltip-top[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

CSS-Tooltip unten

/* Tooltip on Bottom */
.tooltip-bottom[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

CSS-Tooltip rechts

/* Tooltip on Right */
.tooltip-right[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  left: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

CSS-Tooltip links

/* Tooltip on Left */
.tooltip-left[data-tooltip]:hover:after {
  content: attr(data-tooltip);
  padding: 4px 8px;
  position: absolute;
  right: 100%;
  white-space: nowrap;
  z-index: 20px;
 
  background-color: #000;
  color: #fff;
}

Fertiges Beispiel ansehen bzw. herunterladen

Demo | Download

Quelle: Webdesignerhut.com

Tweet about this on TwitterShare on Google+0Share on Facebook0Email this to someone

Schreib einen Kommentar

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