【HTML】Tooltips Básicos | Mostrar Sugerencias al Pasar el Ratón con el Atributo title
Este tutorial explica cómo usar el atributo title de HTML para mostrar tooltips simples, y cómo crear tooltips personalizados usando CSS y JavaScript.
🔹 Código Básico
<p>Pase el ratón sobre esta<span title="Información adicional"> parte</span> para ver el tooltip.</p>
💻 Código Completo en Funcionamiento (Solo copia y pega para probar)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demostración de Tooltip</title>
<style>
body {
font-family: 'Segoe UI', Meiryo, sans-serif;
padding: 20px;
text-align: center;
line-height: 1.6;
}
.tooltip-demo {
color: #1e88e5;
font-weight: bold;
cursor: help;
border-bottom: 1px dashed #1e88e5;
padding-bottom: 1px;
}
.tooltip-demo:hover {
color: #0d47a1;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<h2>Demostración de Tooltip</h2>
<p>Pase el ratón sobre esta<span class="tooltip-demo" title="¡El tooltip está apareciendo! Texto adicional aparece aquí."> texto azul</span> para ver el tooltip.</p>
<p>Esta demostración muestra el comportamiento predeterminado del tooltip usando el atributo title de HTML.</p>
</div>
</body>
</html>
🧩 Características Básicas de los Tooltips
Los tooltips usando el atributo title son una característica estándar del navegador que puede implementarse sin JavaScript. Aparecen aproximadamente 1 segundo después de pasar el ratón sobre un elemento y desaparecen cuando el ratón se aleja o se hace clic.
Las ventajas incluyen soporte en todos los navegadores principales y características de accesibilidad, como el soporte para lectores de pantalla. Sin embargo, la personalización del diseño no es posible.
🎯 Creación de Tooltips Personalizados
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<div class="tooltip">Pase el ratón sobre mí
<span class="tooltiptext">Tooltip Personalizado</span>
</div>
Se pueden crear tooltips personalizados usando solo CSS y HTML. Este método permite mayor flexibilidad en el diseño y se pueden agregar efectos de animación. Sin embargo, sin JavaScript, los ajustes dinámicos de posición pueden ser limitados.
📚 Ejemplos Prácticos de Uso
Sugerencias en campos de formulario: <label>Contraseña: <input type="password"><span title="Por favor, incluye al menos 8 caracteres y un número">?</span></label>
Explicaciones de términos: <p><span title="HyperText Markup Language">HTML</span> es un lenguaje utilizado para crear páginas web.</p>
Estos ejemplos muestran cómo puedes usar los tooltips de manera efectiva para mejorar la usabilidad de la interfaz de usuario.
⚠️ Nota Importante: Tooltips vs Enlaces
Funcionalidad de Tooltip Puro
El método descrito en este artículo es una funcionalidad de tooltip puro sin comportamiento de enlace. El <span title="..."> es:
- No navega a ninguna página cuando se hace clic
- Solo se usa para mostrar información al pasar el ratón
- El estilo visual (como cambios de color) se hace con CSS
<!-- Sin funcionalidad de enlace --> <span class="tooltip" title="Descripción">Objetivo del ratón</span> <!-- Enlace con tooltip --> <a href="page.html" title="Descripción">Enlace clickeable</a>
Combinando Tooltips con Enlaces
Para crear un tooltip con un enlace, simplemente agrega el atributo title a la etiqueta <a>:
<a href="#" class="tooltip-link" title="Serás redirigido a la página detallada">
Enlace clickeable
</a>
<style>
.tooltip-link {
color: #0066cc;
text-decoration: underline;
}
</style>