css3 tooltip maker al hacer click

KenMasters · #1 (**permalink**) 02/12/2012, 21:09

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

memoadian · #2 (**permalink**) 02/12/2012, 21:20

con solo css3, no se puede, ya que usa un hover, necesitas hacerlo con javascript onclick.

KenMasters · #3 (**permalink**) 02/12/2012, 21:55

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.

memoadian · #4 (**permalink**) 02/12/2012, 21:56

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.

pzin · #5 (**permalink**) 03/12/2012, 02:15

Puedes hacer algo así con CSS.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
  <style>
    .algo {
      display: block;
    }
    .algo .titulo {
      display: none;
    }
    .algo:active .titulo {
      display: block;
    }
  </style>
</head>
<body>
  <div class="algo">
    Algo de texto
    <div class="titulo">Soy un título!</div>
  </div>
</body>
</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í.