Sep 07

Crear Tooltips solo con CSS
Que coñññ… es un tooltip?, es esa ventana que se muestra sobre un texto u objeto, al posicionar el puntero en el… o bien cuando tiene la etiqueta “title” y bueno se sabe que hay tooltips con css y jQuery en esta ocasión intentaremos hacerlo solo con css (aver sino nos demanda MS que ta patentao eso jaja).
Codigo CSS del Tooltip
1 2 3 4 5 6 7 8 | .texto{width:500px;height:100px;border:1xp solid #CCC;} .tootip span{display:none;background:#FFFFD9;border:1px solid #F1E594;color:#333; position:absolute; /* tenemos que posicionar la cajita absoluta*/ left:15px; /* alineamos la cajita al gusto*/ top:15px; /* alineamos la cajita al gusto*/ width:210px; /*podemos variar el tamaño de la cajita*/ padding:2px 5px;} .texto .tootip:hover span{display:block;} |
Codigo HTML del Tooltip
1 2 3 4 5 6 | <p class="texto"> Texto de la <a href="#" class="tootip">primera linea<span>Bueno soy un tooltip ok?... bueno</span></a> del parrafo esto es otra linea de este parrafo ya tengo pereza de seguir inventando ok esta ya es la ultima linea del parrafo. </p> |
Ver demo del Tooltip CSS
Compartir






wow y yo subestimando al css
quedo de maravilla