Saludos.
Esta vez nuestro tutorial trata sobre cómo añadir tooltip a nuestro blog
y es, además de fácil, muy bonito para nuestros blogs o páginas.
¿Qué es el tooltip?
El tooltip (Heramienta de información) es mayormente utilizado para especificar información adicional acerca de algo cuando el puntero pasa sobre el texto/elemento.
Pasa sobre mi
Gracias por pasarte por el blog
Paso 1
Primero nos iremos a Plantilla → Editar HTML → CTRL + F → Buscamos ]] </b:skin> → Copiamos lo siguiente y pegamos encima del codigo anterior:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* Bordes del texto esto es opcional*/
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px; /* ancho del texto del tooltip */
background-color: #F7FDFF; /* Color del fondo */
color: #000000; /* Color del texto */
text-align: center; /* Alineación */
border-radius: 6px; /* Borde del tooltip */
padding: 5px 0; /* Espaciado entre el texto y el fondo */
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1; /* Opacidad al pasar el ratón o Puntero */
}
Ahora solo deben editar su tooltip, dan vista previa antes de guardar y guardamos. Ahora nos toca utilizarlo.
¿Cómo utilizar el tooltip?
Cuando deseen crear su entrada/post, se dirijen en la barrita de herramientas de Blogger y pinchan en HTML, allí colocamos lo siguiente:
<div class="tooltip">Texto
<span class="tooltiptext">Texto del tooltip</span>
</div>
Verde: Texto.
Azul: Texto del tooltip.
♥ ♥ ♥
Que disfruten el tuto♥
—Marie.
0 comentarios ♥