En HTML, para mostrar sugerencias o texto de ayuda al pasar el cursor sobre un elemento, se usa principalmente el atributo title.
El atributo title puede aplicarse a casi cualquier etiqueta HTML (<p>, <a>, <img />, <button>, etc.).
El navegador mostrará un tooltip nativo con el texto del title cuando el usuario pase el cursor por encima.
Usa el solo el atributo
title para que funcione. Puedes personalizarlo con estilo usando CSS.
Ejemplo de tooltip simple:<p>Pase el ratón sobre esta<span title="Información adicional"> parte</span> para ver el tooltip.</p>
Ejemplo de tooltip personalizado:<!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>
.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>
</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>
<div class="tooltip">Pase el ratón sobre mí
<span class="tooltiptext">Tooltip Personalizado</span>
</div>
</body>
</html>
No hay comentarios.:
Publicar un comentario