Foros del Web » Creando para Internet » CSS »

css3 tooltip maker al hacer click

Estas en el tema de css3 tooltip maker al hacer click en el foro de CSS en Foros del Web. acabo de ver el ejemplo que muestran para tooltip de esta web : http://www.menucool.com/tooltip/css3-tooltip lo que tengo no se es como en vez de que ...
  #1 (permalink)  
Antiguo 02/12/2012, 21:09
 
Fecha de Ingreso: abril-2005
Ubicación: Piura - Perú
Mensajes: 189
Antigüedad: 16 años, 3 meses
Puntos: 0
css3 tooltip maker al hacer click

acabo de ver el ejemplo que muestran para tooltip de esta web : http://www.menucool.com/tooltip/css3-tooltip

lo que tengo no se es como en vez de que el evento aparesca cuando pase el mouse, ocurra al hacer click y al hacer click fuera del tooltip se cierre.

gracias de antemano
  #2 (permalink)  
Antiguo 02/12/2012, 21:20
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 1 mes
Puntos: 641
Respuesta: css3 tooltip maker al hacer click

con solo css3, no se puede, ya que usa un hover, necesitas hacerlo con javascript onclick.
  #3 (permalink)  
Antiguo 02/12/2012, 21:55
 
Fecha de Ingreso: abril-2005
Ubicación: Piura - Perú
Mensajes: 189
Antigüedad: 16 años, 3 meses
Puntos: 0
Respuesta: css3 tooltip maker al hacer click

nadie me da un ejemplo por ahi de como deberia de ser el codigo para hacer un tooltip que se aparesca al hacer click en un enlace, que se aparesca en la parte inferior del link casi parecido como el de gmail, aparece nuestro correo en la parte superior derecha, y le das click y aparece un popup donde aparece la foto y referencias.
  #4 (permalink)  
Antiguo 02/12/2012, 21:56
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 12 años, 1 mes
Puntos: 641
Respuesta: css3 tooltip maker al hacer click

mira esto:

http://craigsworks.com/projects/simpletip/

es muy simple de usar.

Solo asocias, click de JQuery a la funcion simpletip.

podrias incluso usar un div oculto, con posición absoluta y mostrarlo.

o incluso con el ejemplo de css3, que pusiste, en vez de a span:hover

solo le pones nombre y con Jquery (que es muy simple le añades la clase con un click)

todo es cosa de buscarle.
  #5 (permalink)  
Antiguo 03/12/2012, 02:15
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.485
Antigüedad: 19 años
Puntos: 2113
Respuesta: css3 tooltip maker al hacer click

Puedes hacer algo así con CSS.

Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   <style>
  3.     .algo {
  4.       display: block;
  5.     }
  6.     .algo .titulo {
  7.       display: none;
  8.     }
  9.     .algo:active .titulo {
  10.       display: block;
  11.     }
  12.   </style>
  13. </head>
  14.   <div class="algo">
  15.     Algo de texto
  16.     <div class="titulo">Soy un título!</div>
  17.   </div>
  18. </body>
  19. </html>

Incluso con :target se podría hacer algo más usable. De todas formas pienso que, como dice memoadian, es casi mejor usar javascript para hacer algo así.

Etiquetas: css3, maker, 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 09:46.