CSS - Tooltips: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webdesigner! Heute tauchen wir ein in die wundervolle Welt der CSS-Toolips. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich aufgeregt, dich auf dieser Reise zu führen. Mach dir keine Sorgen, wenn du noch nie eine Zeile Code geschrieben hast – wir fangen von ganz unten an und arbeiten uns hoch. Also, hol dir eine Tasse Kaffee (oder Tee, wenn das dein Ding ist) und los geht's!

CSS - Tooltips

Was sind Tooltips?

Bevor wir mit der Erstellung von Tooltips beginnen, lassen wir uns erstmal darstellen, was sie sind. Stell dir vor, du bewegt deine Maus über ein Symbol auf einer Webseite und plötzlich erscheint ein kleines Kästchen mit zusätzlichen Informationen. Das ist ein Tooltip! Sie sind wie kleine Helfer, die zusätzliche Kontextinformationen bieten, ohne deinen Hauptinhalt zu verstopfen.

Erstellung von Tooltips

Lassen wir mit der Erstellung eines einfachen Tooltips beginnen. Dafür brauchen wir etwas HTML und CSS. Mach dir keine Sorgen, wenn du nicht alles sofort verstehst – wir werden es Schritt für Schritt auseinandernehmen.

<div class="tooltip">Bewege die Maus über mich!
<span class="tooltiptext">Dies ist ein Tooltip</span>
</div>

Nun fügen wir etwas CSS hinzu, damit es funktioniert:

.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px gepunktetes schwarz;
}

.tooltip .tooltiptext {
sichtbarkeit: versteckt;
breite: 120px;
hintergrundfarbe: schwarz;
farbe: #fff;
textausrichtung: zentriert;
border-radius: 6px;
polsterung: 5px 0;
position: absolut;
z-index: 1;
unten: 125%;
links: 50%;
linkes-abbildung: -60px;
}

.tooltip:hover .tooltiptext {
sichtbarkeit: sichtbar;
}

Lassen wir das auseinandernehmen:

Wir setzen den Hauptbehälter auf position: relative, damit wir den Tooltip in Relation zu ihm platzieren können.
Der Tooltip-Text ist standardmäßig versteckt mit sichtbarkeit: versteckt.
Wir verwenden position: absolut, um den Tooltip zu platzieren.
Die :hover-Pseudoklasse macht den Tooltip sichtbar, wenn wir über den Behälter bewegen.

Positionierung von Tooltips

Nun, da wir wissen, wie man einen einfachen Tooltip erstellt, lassen wir uns verschiedene Möglichkeiten zur Positionierung von Tooltips anschauen. Wir können Tooltips oben, unten, rechts oder links eines Elements platzieren.

Tooltip oben

Wir haben bereits einen Tooltip oben in unserem ersten Beispiel gesehen. Hier ist eine Erinnerung:

.tooltip .tooltiptext {
unten: 125%;
links: 50%;
linkes-abbildung: -60px;
}

Tooltip unten

Um einen Tooltip unten zu erstellen, müssen wir nur einige Zeilen ändern:

.tooltip .tooltiptext {
oben: 125%;
links: 50%;
linkes-abbildung: -60px;
}

Tooltip rechts

Für einen Tooltip rechts adjustieren wir die Positionierung wie folgt:

.tooltip .tooltiptext {
oben: -5px;
links: 105%;
}

Tooltip links

Und für einen Tooltip links:

.tooltip .tooltiptext {
oben: -5px;
rechts: 105%;
}

Tooltip Pfeile

Nun geben wir unseren Tooltips mit Pfeilen etwas Pepp! Diese kleinen Dreiecke machen unsere Tooltips professioneller aussehen und helfen, auf das genaue Element hinzuweisen, das sie beschreiben.

Tooltip mit Pfeil oben

Um einen Pfeil zu unserem oberen Tooltip hinzuzufügen, verwenden wir das ::nachher-Pseudoelement:

.tooltip .tooltiptext::nachher {
inhalt: "";
position: absolut;
oben: 100%;
links: 50%;
linkes-abbildung: -5px;
rand-breite: 5px;
rand-style: fest;
rand-farbe: schwarz transparent transparent transparent;
}

Dies erstellt ein kleines Dreieck, das nach unten zeigt.

Tooltip mit Pfeil unten

Für einen Pfeil nach unten verwenden wir ähnliches CSS, aber mit geänderter Positionierung und Randfarben:

.tooltip .tooltiptext::nachher {
inhalt: "";
position: absolut;
unten: 100%;
links: 50%;
linkes-abbildung: -5px;
rand-breite: 5px;
rand-style: fest;
rand-farbe: transparent transparent schwarz transparent;
}

Tooltip mit Pfeil rechts

Für einen nach rechts zeigenden Pfeil:

.tooltip .tooltiptext::nachher {
inhalt: "";
position: absolut;
oben: 50%;
rechts: 100%;
margen-oben: -5px;
rand-breite: 5px;
rand-style: fest;
rand-farbe: transparent schwarz transparent transparent;
}

Tooltip mit Pfeil links

Und für einen nach links zeigenden Pfeil:

.tooltip .tooltiptext::nachher {
inhalt: "";
position: absolut;
oben: 50%;
links: 100%;
margen-oben: -5px;
rand-breite: 5px;
rand-style: fest;
rand-farbe: transparent transparent transparent schwarz;
}

Tooltips einblenden

Möchtest du deinen Tooltips eine sanfte Animation hinzufügen? Lassen wir sie einblenden!

.tooltip .tooltiptext {
deckung: 0;
übergang: deckung 0.3s;
}

.tooltip:hover .tooltiptext {
deckung: 1;
}

Dieses CSS lässt deinen Tooltip über 0,3 Sekunden sanft einblenden, wenn du über das Element bewegt.

Vorteile von Tooltips

Nun, da wir gelernt haben, wie man Tooltips erstellt und gestaltet, lassen wir uns über die Gründe sprechen, warum sie so großartig sind:

Platzsparend: Tooltips ermöglichen es dir, zusätzliche Informationen bereitzustellen, ohne deinen Hauptinhalt zu verstopfen.
Benutzerfreundlich: Sie bieten sofortige Klarstellung genau dort, wo der Benutzer sie braucht.
Verbesserung der UX: Tooltips können Benutzer durch deine Benutzeroberfläche führen und das Navigieren erleichtern.
Flexibilität: Wie wir gesehen haben, können Tooltips auf verschiedene Weisen positioniert und gestaltet werden, um dein Design zu passen.

Tooltip-Methoden

Hier ist eine praktische Tabelle, die die verschiedenen Tooltip-Methoden zusammenfasst, die wir behandelt haben:

Methode	Beschreibung
Tooltip oben	Erscheint über dem Element
Tooltip unten	Erscheint unter dem Element
Tooltip rechts	Erscheint rechts vom Element
Tooltip links	Erscheint links vom Element
Pfeil-Tooltip	Fügt einen zeigenden Pfeil zum Tooltip hinzu
Einblend-Tooltip	Fügt eine sanfte Einblend-Animation hinzu

Und das war's, Leute! Ahora se bist mit dem Wissen ausgestattet, um stilvolle, informative Tooltips für deine Webprojekte zu erstellen. Denke daran, üben macht den Meister, also habe keine Angst, mit verschiedenen Stilen und Positionen zu experimentieren. Wer weiß? Vielleicht erstellst du das nächste große Ding im Tooltip-Design!

Frohes Coden und möge deine Tooltips immer hilfreich und nie ärgerlich sein!

Credits: Image by storyset