Lunany-kawaii: Tutorial: Tooltip 1 ♥+Vota por mi ♥

Era Rodolfo un reno que tenia la nariz,roja como la grana la la ♪ ♩ ♬

Hola chicas

,Bueno se abran dado cuenta que ya puse a las 8 primeras que comentaron en la anterior entrada ,pero me sobro dos espacios y los rellenare con los que siguieron comentando en esa entrada también me falta poner efecto a las imágenes

jeje

¿Que es tooltip?
Un tooltip ,conocido como globos de ayuda ,al pasar el cursor sobre una imagen o link aparece mayormente un rectángulo o una cajita y aparece alguna descripción que le pueden poner ustedes

Ejemplo:

Donde dice Oso durmiente

aparece una cajita apenas pase el cursor sobre la primera imagen ,a esa cajita se le llama Tooltip.

El que les are un tutorial es de este modelo el que tengo ,el que vieron en la imagen

Para obtenerlo primero vamos a Plantilla/Edicion HTML

Presionan Ctrl+F colocan en el buscador :

</head>

y colocan el siguiente codigo antes de </head>

(para copiar el codigo ,selecciona todo el codigo y Presionas Ctrl+C y ya lo tienes copiado y lo pegas donde te indique )

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script src="https://googledrive.com/host/0B5KbDl35bjicR1J5LV9EOXJOSkE"></script>
<style>
div#qTip {
margin:10px;
padding:3px 5px 3px 29px;
z-index: 1000;
background: #e6decf;/*Fondo de Tooltip*/
text-shadow: 1px 1px 0 #ebd2bc;/*Sombra del Texto*/
border: 2px dotted #FFF;/*Tamaño del borde,Forma de Borde,Color del borde*/
color: #b8997e;/*Color de la Letra*/
letter-spacing: 1px;
font-size: 12px;/*Tamaño de la letra*/
text-align: left;
position: absolute;
z-index: 1000;
background:#e6decf url(Url del la imagen que acompaña al texto)no-repeat 5%;
}
</style>

Pagina para eligir colores :http://html-color-codes.info/

Bueno le pueden añadir lo que gusten ,si quieren que tenga unos bordes en las esquinas redondeadas solo tienen que agregar despues de div#qTip {

border-radius:3px;/*Tamaño de borde aredondeado*/

Bueno para poner la descripcion que quieras que salga solo tienen que aser lo siguiente:
Para que una imagen salga el Tooltip

<a href="Url de la pagina" title="Titulo aquí lo que quieres que salga en Tooltip"><img src="Url de la Imagen" /></a>

Url de la pagina si no la quieren solo remplasenlo por /
Para un Enlace

<a href="Url de la pagina" title="Titulo aquí lo que quieres que salga en Tooltip">Texto aqui
</a>

Listo ,al costado aparece cada uno que es ,están de su mismo color ok?Bueno , mas rato cuando vuelva pondré mas detalles de como cambiar color ,asi como le sabia poner antes ,que es cada cosa