Crear Tooltips con CSS

Name: Crear Tooltips con CSS
Brand: Jose Aguilar
SKU: joseaguilarblog-1521
Availability: InStock
Rating: 5 (3 reviews)

Tooltip no es una palabra que pueda traducirse con facilidad. Son ventanitas, generalmente de fondo amarillo o gris que aparecen cuando colocamos el puntero del ratón sobre un objeto de la pantalla.

Por ejemplo, a los links se le puede poner un title que se utiliza para que cuando se pase el ratón por encima del link se vea un texto que puede mostrar algo de información sobre el link, pero esto sirve para muy poco, sin embargo, es posible crear algo que funcione de manera similar pero más interesante. Y para esto, basta tener una pequeña idea de como funcionan las hojas de estilo.

La clave para tener tooltips con un estilo o diseño es utilizar las técnicas CSS de la siguiente forma:

Podemos declarar las siguientes clases CSS para tener unos tooltips más interesantes:

a.Ntooltip {
position: relative; /* es la posición normal */
text-decoration: none !important; /* forzar sin subrayado */
color:#0080C0 !important; /* forzar color del texto */
font-weight:bold !important; /* forzar negritas */
}

a.Ntooltip:hover {
z-index:999; /* va a estar por encima de todo */
background-color:#000000; /* DEBE haber un color de fondo */
}

a.Ntooltip span {
display: none; /* el elemento va a estar oculto */
}

a.Ntooltip:hover span {
display: block; /* se fuerza a mostrar el bloque */
position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */
top:1em; left:1em; /* donde va a estar */
width:250px; /* el ancho por defecto que va a tener */
padding:5px; /* la separación entre el contenido y los bordes */
background-color: #0080C0; /* el color de fondo por defecto */
color: #FFFFFF; /* el color de los textos por defecto */

}

El diseño del tooltip es totalmente editable a través de CSS, tamaños, colores…Luego en el <body> tener algo como lo siguiente:

<a href="#">enlace
     <span><table cellspacing="5" cellpadding="2" border="0" style="border: 1px solid rgb(231, 87, 59);">
        <tr>
            <td align="center"><b>Zzril delenit augue</b></td>
            <td><img height="100" width="100" src="POST_1.png"/></td>
        </tr>
        <tr>
            <td style="padding: 10px;" colspan="2">
                <p style="border: 1px dotted rgb(252, 217, 197); padding: 10px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            </td>
        </tr>
    </table></span>
</a>

En este caso, la idea es que al pasar el ratón por encima del enlace se muestre la tabla que hay dentro del <span>.

El resultado lo puedes ver en el ejemplo en funcionamiento.

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(3 votos, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

2 respuestas a “Crear Tooltips con CSS”

Our Home Page dice:

19/12/2016 a las 21:27

What’s up, everything is going fine here and ofcourse every one is sharing data, that’s in fact fine, keep up writing.|

Responder
Stepanie Heimbach dice:

03/02/2012 a las 7:57

Outstanding post, you have pointed out some great points , I too think this s a very wonderful website.

Responder