4 einfache und geniale CSS Tool Tipps

CSS Tool Tipps mit HTML5-Data-Attribute

1

In meinem heutigen Tutorial möchte ich Ihnen zeigen, wie einfach es ist, ohne viel Aufwand 4 geniale und reine CSS Tooltipps zu erstellen.

Ein Tooltipp ist ein kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten. Es zeigt eine Beschreibung zu einem Element der grafischen Benutzungsoberfläche.
Alternative Namen sind unter Windows Quickinfo (‚schnelle Info‘, ‚Schnellinfo‘) sowie allgemein Mouse over, da der Tooltip erscheint, wenn der Mauszeiger eine kurze Zeit unbewegt über dem entsprechenden Element verweilt (hover, ‚schwebt‘; deutsche Bedeutung in etwa ‚Mausschwebetext‘).

Für die erste Quickinfo verwende ich das -Element mit der HTML-Klasse von tooltip tooltip-top und data-tooltip.

Tooltip Oben

Nach der HTML-Zeile geht`s zu den Cascading Style Sheets (CSS). Damit die Quickinfo angezeigt wird, wenn Sie mit der Maus darüberfahren, sind folgende CSS-Anweisungen notwendig:

CSS:

/* Some basic styling to notify users
   about the tooltips*/
.tooltip {
  color: #900;
  text-decoration: none;
}
 
.tooltip:hover {
  color: red;
  position: relative;
}
 
/* 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;
}

Wenn Sie jetzt mit dem Mauszeiger über das (die) spezielle Wort/Phrase fahren, erscheint über dem Text eine schwarze Box mit dem vorher festgelegten Text in data-tooltip=“Hallo! Ich bin ganz oben!“.

tooltipp1

Richtung der 4 Tooltipps verändern/festlegen

Um die Infoboxen richtungsmäßig zu verändern, müssen Sie einfach nur im CSS einige kleine Veränderungen vornehmen

Tooltipp 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;
}

Tooltipp 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;
}

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;
}

Die Ergebnisse zeigen, wie einfach die reinen CSS Tooltipps zu erstellen waren. Selbstverständlich können Sie z.B. ganz leicht die Hintergrund- und Schriftfarbe der Quick-Infos ändern

Alle 4 Quick-Infos als Musterbeispiel

Ich habe alle Tooltipps in einer HTML- und CSS-Datei zusammengefasst und möchte Ihnen das fertige Beispiel als DEMO-Beispiel zum Ansehen und kostenlosen Herunterladen anbieten:

[Demo-Beispiel ansehen | Demo-Beispiel herunterladen]

Quelle: WebdesignerHut.com

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

Schreib einen Kommentar

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