sep
7
2009

Tooltip solo con CSS

An article by miguelortega Comments

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

.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

<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>