Foros del Web » Creando para Internet » CSS »

Tooltip con Imágenes en Botones y Links

Estas en el tema de Tooltip con Imágenes en Botones y Links en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/01/2012, 20:55
 
Fecha de Ingreso: junio-2008
Mensajes: 95
Antigüedad: 13 años, 1 mes
Puntos: 0
Tooltip con Imágenes en Botones y Links

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.
  #2 (permalink)  
Antiguo 26/01/2012, 21:06
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 5 meses
Puntos: 1145
Respuesta: Tooltip con Imágenes en Botones y Links

quizás buscas algo como esto
Código CSS:
Ver original
  1. .tooltip{display:none;position:absolute;}
  2. a:hover+.tooltip{display:block;}
Código HTML:
Ver original
  1. 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.
  #3 (permalink)  
Antiguo 26/01/2012, 22:09
 
Fecha de Ingreso: junio-2008
Mensajes: 95
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Tooltip con Imágenes en Botones y Links

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.
  #4 (permalink)  
Antiguo 26/01/2012, 22:27
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 13 años, 5 meses
Puntos: 1145
Respuesta: Tooltip con Imágenes en Botones y Links

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:
Ver original
  1. .tooltip{display:none;position:absolute;background:#FF9;border:1px #FF0 solid; border-radius:8px;padding:8px;}
  2. .tooltip img{float:left;margin:0 8px 8px 0;}
  3. a:hover+.tooltip,.tooltip:hover{display:block;}
Código HTML:
Ver original
  1. 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>
  2. <div class="tooltip">
  3. <img src="http://cdn5.iconfinder.com/data/icons/duesseldorf/32/print.png" width="20px" />
  4. 'Content here, content here', making it look like readable English.
  5. </div>
  6.  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.
  #5 (permalink)  
Antiguo 29/01/2012, 15:04
 
Fecha de Ingreso: junio-2008
Mensajes: 95
Antigüedad: 13 años, 1 mes
Puntos: 0
Respuesta: Tooltip con Imágenes en Botones y Links

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.

Etiquetas: botones, links, tooltip
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:34.