CSS Tool Tipps mit HTML5-Data-Attribute
In meinem heutigen Tutorial möchte ich Ihnen zeigen, wie einfach es ist, ohne viel Aufwand 4 geniale und reine CSS Tooltipps zu erstellen.
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!“.
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