Tooltips
Teil des Abschnitts Praktisches Frontend der HTML-Journey von Coddy. Lektion 23 von 35.
Tooltips sind kleine, informative Pop-up-Elemente, die erscheinen, wenn ein Nutzer mit dem Mauszeiger über ein Oberflächenelement fährt oder es fokussiert. Sie bieten zusätzlichen Kontext, ohne die Hauptoberfläche zu überladen.
Erstellen wir einen einfachen Tooltip mit HTML und CSS:
Erstelle zuerst die HTML-Struktur:
<div class="tooltip-container">
<button>Hover over me</button>
<span class="tooltip">This is a tooltip!</span>
</div>Füge als Nächstes das CSS hinzu, um den Tooltip zu positionieren und ein- oder auszublenden:
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
visibility: hidden;
/* Positioniere den Tooltip */
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
/* Blende den Tooltip sanft ein und aus */
opacity: 0;
transition: opacity 0.3s;
}
/* Zeige den Tooltip an, wenn sich der Mauszeiger über dem Container befindet */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}Mit diesem Code erscheint ein Tooltip über der Schaltfläche, wenn du mit der Maus darüberfährst.
Aufgabe
EinfachDu erhältst einen HTML-Button mit einem Tooltip, der erscheint, wenn der Benutzer mit der Maus über den Button "Help" fährt. Deine Aufgabe:
- Den Tooltip standardmäßig ausblenden.
- Eine Hintergrundfarbe und eine Textfarbe hinzufügen, damit er sich abhebt.
- Den Text im Tooltip zentrieren.
- Etwas Innenabstand hinzufügen, damit der Tooltip ansprechender aussieht.
- Die Ecken mit
border-radiusabrunden.
Probier es selbst
<!DOCTYPE html>
<html>
<head>
<title>Tooltips</title>
<style>
.tooltip-container {
position: relative;
display: inline-block;
margin: 50px;
}
button {
padding: 8px 16px;
cursor: pointer;
}
.tooltip {
/* Animation properties */
opacity: 0;
transition: opacity 0.3s;
}
/* Show the tooltip when hovering over the container */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip-container">
<button>Help</button>
<span class="tooltip">Click for assistance</span>
</div>
</body>
</html>
Teste dich selbstDiese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Praktisches Frontend
1Variablen
VariablenCSS-Variablen verwendenVariablen für Design-TokensLokale VariablenRückblick-Herausforderung7Abschließende Herausforderungen
ProfilkarteSchokoladengalerie-RasterSieben WeltwunderNeue sieben WeltwunderÜbe selbstständig: Web-Playground