Tooltips en CSS

Para ver en Youtube haz click aquí (Recuerda Suscribirte)
Para ver en Youtube (segundo video) haz click aquí 
Para ver más videos de CSS click aquí
Dame like en facebook, click aquí

¿Que es un "Tooltip" ?

 Los tooltip son usados para mostrar información extra acerca de un elemento, justo cuando el usuario pasa el mouse por encima. Los podemos ver como una forma mas moderna del antiguo atributo "alt", para los que no lo saben, anteriormente este atributo nos permitía mostrar un texto cuando el usuario posaba el mouse encima, actualmente este atributo tiene otra funcionalidad totalmente diferente.

Tooltip de texto

  En el primer video (El segundo estará disponible mas tarde o mañana) les muestro como hacer un tooltip animado de texto, a continuación el código fuente :

La parte CSS :

<style type="text/css">

.tooltip {

background-color: black;

color: white;

padding : 5px;

position: absolute;

border-radius: 5px;

top: 15px;

visibility: hidden;

transition: opacity 1s, visibility 1s, top 1s;

opacity: 0;

}

.tooltip::after {

content: " ";

position: absolute;

top: 100%;

left: 50%;

border-style: solid;

border-width: 5px;

border-color: black transparent transparent transparent;

}

.txt:hover + .tooltip {

visibility: visible;

opacity: 1;

top: 10px;

}

</style>

El HTML:

<br>

<br>

<span class="txt">mi texto</span>

<div class="tooltip">

Información

</div>

  Las etiquetas <br> las coloco para que "mi texto" no quede muy arriba y poder colocar el tooltip arriba de este

Tooltip con imagenes

  En el segundo video, les enseño también a crear un toolttip, pero ahora este no esta compuesto de texto sino de imágenes.

EL CSS :

<style type="text/css">

.tooltip img{

width: 350px;

box-shadow: 5px 5px 10px black;

}

.nav {

list-style-type: none;

margin: 0;

padding: 0;

}

.tooltip {

position : absolute;

visibility: hidden;

opacity: 0;

transition : opacity 1s, visibility 1s;

}

.hori {

display: inline-block;

}

.hori a{

display: block;

padding: 8px;

color: white;

background-color: gray;

text-decoration: none;

}

.hori:hover a{

background-color: black;

}

.hori:hover .tooltip{

visibility: visible;

opacity: 1;

}

</style>

El html :

<ul class="nav">

<li class="hori">

<a href="#">Cuzco</a>

<div class="tooltip">

<img src="Cuzco.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Louvre</a>

<div class="tooltip">

<img src="Louvre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">El puente de la torre</a>

<div class="tooltip">

<img src="Puentetorre.jpg" />

</div>

</li>

<li class="hori">

<a href="#">Venecia</a>

<div class="tooltip">

<img src="Venecia.jpg" />

</div>

</li>

</ul>

  

  Si te gustó este tutorial recuerda suscribirte a mi canal de Youtube y darme like en Facebook