La información sobre herramientas se utiliza para mostrar información sobre un elemento cuando el mouse se ha desplazado sobre ese elemento. La información sobre herramientas se muestra de forma predeterminada sin demora (animación).
¿Cómo agregar animación a Tooltip?
Podemos agregar un efecto de aparición gradual al texto de información sobre herramientas antes de que se vuelva visible. Esto se puede hacer cambiando la opacidad de 0 a completa en un número determinado de segundos usando la propiedad de transición en CSS.
Sintaxis:
.tooltip .tooltip_text {
opacity: 0;
transition: opacity 3s;
}
.tooltip:hover .tooltip_text {
visibility: visible;
opacity: 1;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
.tooltip {
position: relative;
display: inline-block;
color: green;
font-size: 30px;
}
.tooltip .tooltip_text {
visibility: hidden;
font-size: 15px;
padding: 5px;
background-color: #cceabb;
color: black;
text-align: center;
position: absolute;
z-index: 1;
top: 120%;
left: 5%;
opacity: 0;
transition: opacity 3s;
}
.tooltip .tooltip_text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -6px;
border-width: 8px;
border-style: solid;
border-color: transparent transparent #cceabb transparent;
}
.tooltip:hover .tooltip_text {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="tooltip">GeeksforGeeks
<span class="tooltip_text">
A Computer science portal for geeks
</span>
</div>
</body>
</html>
Producción:
Inicialmente, la opacidad del texto de información sobre herramientas se establece en 0 y luego la transición se aplica a la opacidad con un retraso de 3 segundos.
Cuando pasamos el cursor sobre el texto «GeeksforGeeks» , la información sobre herramientas se vuelve 100% visible en 3 segundos. Esto conduce a un efecto/animación de fundido de entrada.
Publicación traducida automáticamente
Artículo escrito por riyakalra59 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA