Los tooltips son muy utiles para dar informacion de un enlace o imagen sin usar espacio en la entrada.
Los sitios más importantes usan tooltips en sus sitio, Google, facebook, twitter, youtube, itunes , etc...
Los usan por su organizacion.
Tu tambien puedes agregar tooltips a tu sitio web o blog siguiendo los siguientes pasos.
Para Sitios Web
Ejemplo: futudownloads
Los sitios más importantes usan tooltips en sus sitio, Google, facebook, twitter, youtube, itunes , etc...
Los usan por su organizacion.
Tu tambien puedes agregar tooltips a tu sitio web o blog siguiendo los siguientes pasos.
- Ve a Plantilla, Edicion de HTML.
- Luego busca la etiqueta ]]></b:skin>, y encima de ella pega lo siguiente.
/* JTip */
.tip_window {
padding:5px;
width:200px;
border:1px solid #fff;
background-color:#000;
color:#fff;
text-align:center;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-box-shadow: 1px 1px 3px #6e6d6e;
-moz-box-shadow: 1px 1px 3px #6e6d6e;
box-shadow: 1px 1px 3px #6e6d6e;
}
/* try this for another style option
.tip_window_other {
width:320px;
padding:5px;
color:#fff;
text-shadow:-1px -1px 0px #2e83ce;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
border:3px solid #fff;
outline:2px solid #2e83ce;
background: #b2e1ff;
background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
}
*/
- Recuerda que lo que está negreado es lo que puedes editar.
- Luego busca etiqueta </head> y encima de ella pega lo siguiente.
<script src='http://code.jquery.com/jquery-1.8.2.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/jTip/jTip.js' type='text/javascript'/>
<script>
$(document).ready(function(){
$(".tip").jTip();
});
</script>
- Los archivos .js están como enlace para que puedas descargarlos.
- guardas los cambios.
- Listo, ahora cuando hagas una entrada, pongas un gadget HTML o lo uses directamente en tu plantilla puedes agregar lo siguiente para que uses lo tooltips.
Enlace.
<a class="tip" href="#" title="Texto del tooltip">texto del enlace</a>
- El # es donde pondrás el enlace, El Texto Purpura es donde agregarás el texto del tooltip y lo que ves en rojo es donde pondrás el texto del enlace. Ejemplo
<a class="tip" href="http://futudownloads.blogspot.com" title="Sitio web de tutoriales">futudownloads</a>
Imagen.
<img class="tip" src='"URL de la imagen" title="Texto del tooltip"/>
Qtiquetas: Jquery 1.5.1 a jquery 1.8.3
Dificultad: baja
Licencia: Free
Fuente: Vanity.enavu.com