Hola nuevamente, se que no he compartido mucho desde hace tiempo pero intentare publicar mas seguido, por ahora les dejo estos tooltip que desarrolle hace poco, están echo totalmente de CSS3, cheque la compatibilidad con varios navegadores pero por motivos de tiempo no probé con muchos, sin embargo si experimentan algún inconveniente siempre pueden contar con mi ayuda dejando un comentario aquí en la entrada explicando el problema. Sin mas que decir comencemos
Si lo vas a incluir dentro de una misma pagina en html recuerda incluirlo dentro de las etiquetas corresponientes, ejemplo:
<style type="text/css">...aqui el codigo...</style>
Si usas blogger no incluiremos estas etiquetas, nos vamos a dirigir a Plantilla > Edición html y buscaremos ]]></b:skin> ensima de eso ponen esto:
.gzero {cursor: pointer;position: relative;}
.gzero > span.tl {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
border-radius: 4px;
color: #FFF !important;
line-height: 1.2;
font-weight: normal;
font-family: arial;
font-size: 11px;
margin-right: -100px;
max-width: 200px;
opacity: 0;
padding: 8px;
position: absolute;
text-align: center;
text-decoration: none !important;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
visibility: hidden;
}
.gzero.left > span.tl {left: -144px;margin-top: -7px;width: 120px;}
.gzero.top > span.tl {bottom: 25px;left: 0;margin-left: -8px;}
.gzero.right > span.tl {margin-top: -7px;right: -46px;width: 120px;}
.gzero.bottom > span.tl {margin-left: -100px;margin-right: -8px;right: 0;top: 27px;}
.gzero:hover > span.tl {visibility: visible;opacity: 1;}
.gzero span.tl > i {display: block;position: absolute;}
.gzero.left span.tl > i {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4_mUfCvNnf5JEweEsppJtiVcj0daZH1I__5ieHBoHDPsClUfDvWtUIPAYIgXkjDGr3vY4tGBGblAoqpNA-aKC3BK5v1hgLO0h_H3Byy-2K0hDP11OEqqOvtWyfpit11NdT6UmFRMT714/s1600/left.png") no-repeat scroll center top transparent;
height: 10px;
right: -5px;
top: 10px;
width: 5px;
}
.gzero.top span.tl > i {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifXIgeSv0tdtzcgu-Tk5TGJbDrmZZRkwnw0p6ASQ-ZYftS7P4_aDRYB6yndrlAYnMRHw9j8_Zcv1Y-RYFsi7OSCOyIEPH6u_iBd4s4lXMnqXcx2VtUQFpzaMGroEe05h93BYxnNBxH5lFi/s1600/top.png") no-repeat scroll center top transparent;
height: 5px;
width: 10px;
bottom: -5px;
left: 12px;
}
.gzero.right span.tl > i {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2GOe1cj-hna_jhK5rqdbq3eiT6IRgqljDUQOIBBVjgwAIF8r5CxDmBw0-NEoTAy_UL7fx_bun_EKdK1BFux6BeH6kdQvYUb08wyIK9FUeQyxu4HajSl-xuefCojdzuUP9hN1FyH-B8__w/s1600/right.png") no-repeat scroll center top transparent;
height: 10px;
left: -5px;
top: 10px;
width: 5px;
}
.gzero.bottom span.tl > i {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibre1PGXq_3tJ1hZxR2HnNmQbYOUJ-wMx1kisfg10qnRajp42R0Av-kGDfq4_2UiLkwsbH90tGlA43tgoZbIvIT_A-5L4QtdrmZZ9s83-5XnT8pjV0mwrx_ZvVKMNpJaiD4ikUHAQBL1Eh/s1600/bottom.png") no-repeat scroll center top transparent;
height: 5px;
right: 12px;
top: -5px;
width: 10px;
}
Y listo, ya podemos correr nuestros tooltips en CSS3, para ello lo hacemos de la siguiente manera
si queremos un pequeño tooltip en un enlace ubicamos el siguiente codigo de esta manera:
<a href="#" class="gzero top">Tu Enlace<span class="tl"><i></i>Tooltip del enlace</span></a>
en el caso de que fuera un texto en lugar de usar la etiqueta "a" usaremos "span"
<span class="gzero top">Tu texto<span class="tl"><i></i>Tooltip del texto</span></span>
podemos usar diferentes direcciones para nuestro tooltip, para ello en donde dice "gzero top" cambiamos "top" por left, right o bottom
por ultimo les dejo un ejemplo del código funcionando, si lo hicieron bien se vera asi (pasar el mouse sobre el texto o enlace):
Espero que les haya gustado, cualquier duda no olviden dejarme un comentario
