Hola, cómo están? Quería mostrarles  algo bien bonito y útil que puede ser usado en cualquier sitio web, algo que es fácil de hacer, y que viene bien saberlo y tenerlo en cuenta, pues puede servir para pulir algún trabajito que tengamos, mejorar un proyecto web propio, o bien simplemente porque andamos con ganas de aprender (aprender nunca está de más, no? :-) ), pues bien, esto que les voy a mostrar, no es ni más ni menos que un Tooltip (aunque ya lo sacaron por el título, esto no es ningún secreto :-P ).

Este tooltip, a diferencia de uno que les mostré la vez anterior (creado con JavaScript), está creado exclusivamente con CSS3. Un tooltip es una herramienta que se activa cuando el usuario posa el puntero del mouse por sobre algún objeto de alguna página web, apareciendo generalmente como un pequeño mensaje que brinda más información acerca de dicho objeto, ese objeto puede ser una imágen, una capa, un link, cualquier objeto de una web.

Pues bien, vamos a lo bueno, a diseñar el tooltip con CSS3, iré explicando algunas cositas acerca de las propiedades CSS3 usadas, pero no demasiado, como mencioné antes, esto es algo muy fácil de realizar, ya se darán cuenta ustedes :-) .

Primero hacemos algo bien fácil, creamos un div con html y le agregamos un id, yo le puse one_div (me maté con el nombre :-P ).

<div id=“one_div”></div>

Y ahora lo mejor, usando CSS3, vamos a darle estilo a ese div, y los comportamientos necesarios para que al posicionarnos encima de él, nos muestre el tooltip.

#one_div{
width:200px;
height:250px;
background-color:#2582AC;
float:left;
margin:15px;
padding:3px;
border-radius:4px;/*propiedad border-radius*/
-moz-border-radius-topleft:4px;/*para mozilla-firefox*/
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-khtml-border-radius:4px;/*para google chrome*/
-webkit-border-radius-bottom-left:4px;/*para navegadores webkit*/
-webkit-border-radius-bottom-right:4px;
-webkit-border-radius-top-left:4px;
-webkit-border-radius-top-right:4px;
-ms-border-radius:4px;/*para ie8+*/
font-family:Tahoma, Arial, Helvetica;
font-size:12px;
font-weight:normal;
text-decoration:none;
text-align:left;
color:#000000;
}

Ahora a ese div vamos a darle un z-index, y una posición, que será relativa.

#one_div:hover{
z-index:7;
position:relative;
}

Ahora, con el pseudo elemento :before, y la propiedad content vamos a especificar que va a llevar el tooltip dentro, lo que vamos a guardar dentro de la propiedad content es un String, y va entre comillas (” “), y por supuesto, además le daremos un display:none, así nuestro tooltip no se muestra de entrada, ya lo haremos aparecer más adelante.

#one_div:before{
content:“Esto es increíble, hemos llevado a cabo un tooltip con CSS3 de forma rápida y sencilla!”;
display:none;
}

Ahora atentos, porque combinando el pseudo elemento :before y el estado :hover de #one_div, daré las instrucciones que harán que el tooltip tenga una determinada apariencia, en este caso, di sombras, esquinas redondeadas, degradados lineales como background, todo muy “CSS3″.

#one_div:hover::before{
width:200px;
display:block;
border:1px solid #000000;
padding:8px;
margin:25px 0 0 10px;
background:-moz-linear-gradient(-90deg,#EEEEEE,#BBBBBB);/*degradado lineal para mozilla*/
background:-webkit-gradient(linear, left top, left bottom, from(#EEEEEE), to(#BBBBBB));/*degradado lineal para navegadores webkit y google chrome*/
box-shadow:#444444 2px 2px 4px ;/*propiedad box-shadow*/
-moz-box-shadow:#444444 2px 2px 4px;
-webkit-box-shadow:#444444 2px 2px 4px;
border-radius:3px;/*propiedad border-radius*/
-moz-border-radius-topleft:3px;/*para mozilla firefox*/
-moz-border-radius-topright:3px;
-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-khtml-border-radius:3px;/*para google chrome*/
-webkit-border-radius-bottom-left:3px;/*para navegadores webkit*/
-webkit-border-radius-bottom-right:3px;
-webkit-border-radius-top-left:3px;
-webkit-border-radius-top-right:3px;
-ms-border-radius:3px;/*para ie8+*/
}

Y listo! Todo terminado, tenemos nuestro tooltip, verdad que no fue difícil hacerlo? Fue facilísimo, no duden en probarlo, además, les quiero hacer notar que esto funcionará en Mozilla Firefox, navegadores Webkit, Google Chrome y otros navegadores que ahora no me vienen a la mente, pero no funcionará en Internet Explorer, al menos por ahora, se espera que la versión 9 de este navegador venga al día con todos los estándares CSS así que bueno, esperemos que sea así, si ven este ejercicio en la demo page desde un navegador Internet Explorer, probablemente no vean nada, porque ahí no funciona, así que les recomiendo ver como queda esto desde Mozilla Firefox, Google Chrome, Safari o el que más les guste.

Espero que te haya gustado esta práctica, y que haya sido de utilidad, hasta el próximo post! :-)