Con
tooltip podemos darle una especie de vista previa a los enlaces que publiquemos en nuestras entradas. Acá unos ejemplos.
Este será nuestro código base
Pasa el puntero del ratón sobre el siguiente texto para que se muestre el
tooltip:
Texto
Texto que mostrara el tooltip
Como en la plantilla tengo agregado el CDN de Bootstrap, no uso
tooltip, sino que lo he personalizado como
tooltip-ms1, evitando así un conflicto con el
CSS de Bootstrap.
HTML
<span class="tooltip-ms1"> <!-- Tooltip -->
Texto <!-- Contenido que se muestra -->
<span> <!-- Contenido oculto que se mostrará al hacer :hover -->
Texto que mostrara el tooltip
</span>
</span>
Esta será la primera parte del CSS
CSS
.tooltip-ms1 {
display: inline-block;
position: relative;
}
Este es el estilo para el contenido dentro del
tooltip
CSS
/* Estilos del contenido, no del tooltip */
.tooltip-ms1 span {
background: #F03; /* Color del fondo */
border: 4px solid #F03; /* Borde, cambiar color junto con color de fondo */
bottom: 50px; /* Distancia relativa al tooltip **/
border-radius: 6px; /* Esquinas redondeadas */
color: white; /* Color texto */
font-size: 13px; /* Tamaño de letra */
left: 50%;
line-height: 16px;
margin-left: -88px;
opacity: 0;
padding: 8px;
position: absolute; /* Importante, así el contenido sale del flujo */
text-align: center; /* Texto centrado */
/** Transición **/
transition: all .2s;
visibility: hidden;
width: 150px; /* Puedes quitar esto si quieres que se estire el contenido */
}
Efecto
Lo siguiente es el efecto de pasar el cursor por encima y activarlo:
CSS
span:hover.tooltip-ms1 span {
/* En el :hover vuelve a su posición y es visible*/
bottom: 30px;
opacity: 1;
visibility: visible;
z-index: 100;
}
Flecha
Bien, con esto realizado ya está casi listo, pero notarás que sólo aparece el
tooltip a secas, no hay nada que los una como una pequeña flecha... para ello hacemos lo siguiente:
CSS
/* Flecha del tooltip */
.tooltip-ms1 span:after { /* Pseudo-elemento */
content: '';
bottom: -14px;
border-left: 10px solid transparent;
border-top:10px solid #F03; /* Color */
border-right: 10px solid transparent;
height: 0;
left: 50%;
margin-left: -9px;
position: absolute;
width: 0;
}
Con esto, tenemos la base para hacer varios
tooltip personalizados.
Se puede tomar todo el código anterior y darle estilos nuevos, incluso se le puede agregar iconos de Fontawesome como veremos en el siguiente ejemplo:
Un tooltip con mucho estilo
CSS: TOOLTIPS ANIMADOS PARA BLOGGER 
CSS: TOOLTIPS ANIMADOS PARA BLOGGER
Tooltiptc
Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...Leer más»
Este sería todo el código modificado:
HTML
<span class="tooltip-ms1"> <!-- Tooltip -->
CSS: TOOLTIPS ANIMADOS PARA BLOGGER <a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER"> <i class="fa fa-external-link"></i></a><!-- Contenido que se muestra -->
<span> <!-- Contenido oculto que se mostrará al hacer :hover -->
<a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER" target="_blank"><img alt="Avatar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLY-PF5bzWajsPETqBDRk5SsKAfQTGhUS-fHMrtv204LPsD2x_uil5MS0WLcvXwZEEsIDwmbcHpBqnGDcBePuBP_jZTz_eVIwZUHN0GliDWaURQ3sBfWQiZvJ6-79qXhXpnp5_rnPlOrY/w499-h498-no/" style="cursor: pointer;float: left;height: 52px;rgin: 5px 5px 5px 5px;width: 52px;"><h2 style="color: #26a69a;font-weight: bold;background: rgba(46,74,117,0.03);">CSS: TOOLTIPS ANIMADOS PARA BLOGGER</h2> Tooltiptc<br>
</a>Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...<a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER">Leer más» <i class="fa fa-external-link"></i></a></span>
</span>
En este
tooltip basado con el código
HTML inicial de Andrés Ardila, le he agregado una imagen (lamentablemente no hay ninguna imagen que haga referencia al post), al enlace al post, lo envolví en el icono de Fontawesome
External-link <i class="fa fa-external-link"></i>. En el
:hover he agregado una parte del texto del post con la leyenda
Leer más».
En el siguiente
tooltip, le he dado algo de estilo, cambiando
tooltip-ms1 por
tooltip-ms2 para diferenciar y no generar conflicto. Acá el
HTML:
HTML
<span class="tooltip-ms2"> <!-- Tooltip -->
CSS: TOOLTIPS ANIMADOS PARA BLOGGER <a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER"> <i class="fa fa-external-link" aria-hidden="true"></i></a><!-- Contenido que se muestra -->
<span> <!-- Contenido oculto que se mostrará al hacer :hover -->
<a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER" target="_blank"><img alt="Avatar" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLY-PF5bzWajsPETqBDRk5SsKAfQTGhUS-fHMrtv204LPsD2x_uil5MS0WLcvXwZEEsIDwmbcHpBqnGDcBePuBP_jZTz_eVIwZUHN0GliDWaURQ3sBfWQiZvJ6-79qXhXpnp5_rnPlOrY/w499-h498-no/" style="cursor: pointer;float: left;height: 52px;rgin: 5px 5px 5px 5px;width: 52px;"><h2 style="color: #26a69a;font-weight: bold;background: rgba(46,74,117,0.03);">CSS: TOOLTIPS ANIMADOS PARA BLOGGER</h2> Tooltiptc<br>
</a>Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...<a href="https://arcandres.blogspot.com/2018/05/tooltips-animados-para-blogger.html" title=" CSS: TOOLTIPS ANIMADOS PARA BLOGGER">Leer más» <i class="fa fa-external-link" aria-hidden="true"></i></a></span>
</span>
CSS
.tooltip-ms2 {
position: relative; /*Muestra el recuadro encima*/
background-color: #26a69a;
font-size: 12px;
font-family: Times New Roman, serif;
font-weight: 600;
line-height: 1.5;
text-align: left;
color: #fff;
float: none;
padding: 3px;
overflow: hidden;
z-index: 1070;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
word-wrap: break-word;
border-radius: 5px;
}
/* Estilos del contenido, no del tooltip */
.tooltip-ms2 span {
background: #030203; /* Color del fondo */
border: 2px solid #1f3b08; /* Borde, cambiar color junto con color de fondo */
bottom: 50px; /* Distancia relativa al tooltip **/
border-radius: 6px; /* Esquinas redondeadas */
color: white; /* Color texto */
font-size: 13px; /* Tamaño de letra */
left: 50%;
line-height: 16px;
margin-left: -88px;
padding: 5px;
padding-bottom: 15px; /*Agregado por mí*/
position: absolute; /* Importante, así el contenido sale del flujo */
text-align: center; /* Texto centrado */
transition: all .5s;
visibility: hidden;
width: 200px; /* Puedes quitar esto si quieres que se estire el contenido. Original en 150px */
}
span:hover.tooltip-ms2 span {
/* En el :hover vuelve a su posición y es visible*/
bottom: 45px;
opacity: 1;
visibility: visible;
z-index: 100;
}
/* Flecha del tooltip */
.tooltip-ms2 span:after {/* Pseudo-elemento */
content: '';
bottom: -14px;
border-left: 10px solid transparent;
border-top: 10px solid #030203; /* Color */
border-right: 10px solid transparent;
height: 0;
left: 50%;
margin-left: -9px;
position: absolute;
width: 0;
}
Resultado
CSS: TOOLTIPS ANIMADOS PARA BLOGGER
CSS: TOOLTIPS ANIMADOS PARA BLOGGER
Tooltiptc
Si bien existen toda clase de Tooltips, en esta publicación les enseñare una forma sencilla de crearlos incluyendo su animación. Veamos, para crearlo necesitamos 3 cosas: la primera sería el elemento...Leer más»
