Agrega tooltip estilo fade en tu blog

Hola ♥

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. Pero...

¿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

Aquí puedes notar el mensaje adicional

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, pero...

¿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.

¿Y bien? les ha funcionado. ¿Necesitas ayuda? Avísame :)

—xo.