Tooltip con Imágenes en Botones y Links

[Hypnoss]

Hola amigos del foro como bien lo dice mi título me gustaría que alguien me diera un ejemplo de un tooltip que despliegue imágenes al pasar el Ratón por encima ya sea en un link o un botón.

Les agradecería su aportación.

[ArturoGallegos]

quizás buscas algo como esto

Código CSS:

.tooltip{display:none;position:absolute;}
a:hover+.tooltip{display:block;}
 

Código HTML:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it <a href="#">to make a type</a><img class="tooltip" src="http://media.animegalleries.net/albums/userpics/48757/1133341983_tsune_Girl.jpg?=123" /> specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

[Hypnoss]

Gracias Ag666 pero ese ejemplo ya lo había visto y es solo para mostrar texto lo que yo pretendo es algo como el ejemplo que pongo en el siguiente enlace:

http://www.recursosvisualbasic.com.a...onalizadas.htm

Solo que este está hecho en ASP yo quiero de ser posible que sea en CSS puro sin java no jquery pero si existe alguno con Jquery es bienvenido.

[ArturoGallegos]

es solo para mostrar texto? y que la imagen que coloque no cuenta?

no veo gran diferencia entre el ejemplo que te puse y lo que muestras en ese link... vamos para lo que muestras en tu link basta un poco de imaginación y se hace algo como esto

Código CSS:

.tooltip{display:none;position:absolute;background:#FF9;border:1px #FF0 solid; border-radius:8px;padding:8px;}
.tooltip img{float:left;margin:0 8px 8px 0;}
a:hover+.tooltip,.tooltip:hover{display:block;}
 

Código HTML:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it <a href="#">to make a type</a>
<div class="tooltip">
<img src="http://cdn5.iconfinder.com/data/icons/duesseldorf/32/print.png" width="20px" />
'Content here, content here', making it look like readable English.
</div>
 specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
 

[Hypnoss]

Si de hecho ya lo probé y si muestra las imágenes, ahora una duda mas como poder hacerle para que el tooltip se muestre hacia la izquierda del Link o arriba de el ya que voy a colocar muchos de estos en liks que pueden estar en la esquina superior derecha de la pantalla otros en la inferior y así en diferentes posiciones de la pantalla y obvio se tendrán que mostrar de manera diferente, tienes alguna idea?? ya intenté con las propiedades top y left y no consigo que se muestren en una posición diferente, menos que yo esté haciendo algo mal.