Tooltips
Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 23 de 35.
Las sugerencias emergentes son pequeños elementos informativos que aparecen cuando el usuario pasa el cursor sobre un elemento de la interfaz o lo enfoca. Proporcionan contexto adicional sin recargar la interfaz principal.
Creemos una información sobre herramientas básica usando HTML y CSS:
Primero, crea la estructura HTML:
<div class="tooltip-container">
<button>Hover over me</button>
<span class="tooltip">This is a tooltip!</span>
</div>A continuación, añade el CSS para posicionar la información emergente y mostrarla u ocultarla:
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
visibility: hidden;
/* Posiciona el tooltip */
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
/* Haz que el tooltip aparezca y desaparezca gradualmente */
opacity: 0;
transition: opacity 0.3s;
}
/* Muestra el tooltip al pasar el cursor sobre el contenedor */
.tooltip-container:hover .tooltip {
visibility: visible;
opacity: 1;
}Con este código, al pasar el cursor sobre el botón, aparecerá una descripción emergente encima.
Desafío
FácilSe te proporciona un botón HTML con una descripción emergente que aparece cuando el usuario pasa el cursor sobre el botón "Help". Tu tarea:
- Ocultar la descripción emergente de forma predeterminada.
- Añadir un color de fondo y un color de texto para que destaque.
- Centra el texto dentro de la descripción emergente.
- Añadir algo de relleno para que la descripción emergente se vea mejor.
- Redondear las esquinas con
border-radius.
Pruébalo tú mismo
<!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>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Frontend Práctico
Practica por tu cuenta: Playground de Web