Lo primero es explicar que es un tooltip. Un tooltip es simplemente una descripción emergente que reacciona cuando el usuario pulsa o situa el ratón encima de algún elemento gráfico. Un ejemplo claro es cuando usamos alt para dar una descripción a una imagen, al situar el ratón sobre ella, se nos abrirá un recuadro con dicha descripción.
Actualmente y gracias a los plugin de javascript, mas concretamente jquery podemos hacer virguerias con los tooltips.
En esta ocasión vamos a crear un tooltip que nos servirá para dar una determinada información de la marca de un coche.
Creamos una carpeta y la nombramos js; aquí guardaremos descomprimido el archivo js que necesitamos para que corra este efecto. Lo podéis descargar de aquí:
Una vez lo tengamos guardado en la carpeta, nos vamos a nuestro html, y entre las etiquetas <head> y </head> escribimos lo siguiente:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#coche").tooltip({ effect: 'slide'});
});
</script>
Estas declaraciones son fáciles de entender. En orden sería:
Nuestra hoja de estilos:
#contenedor {
width: 600px;
margin: 0 auto;
margin-top: 250px;
padding: 25px;
background: #eef;
border: 5px solid #FF0000;
}
#coche {
display: block;
width: 160px;
height: 160px;
overflow: hidden;
margin: 0 auto;
background: none;
cursor: pointer;
text-align: center;
}
.tooltip {
display: none;
width: 310px;
height: 163px;
padding: 35px 30px 10px 30px;
background: url(imagenes/tooltip.png) no-repeat;
font-size: 11px;
color: #FFF;
}
.tooltip .left {
float: left;
width: 180px;
}
.tooltip .right {
float: right;
margin-right: 10px;
}
.tooltip strong {
color: #FF0000;
font-size: 12px;
}
El código html nos quedaría así:
<div id="contenedor">
<a id="coche"><img src="imagen" /></a> // Capa sobre la que actua el tooltip
<div class="tooltip"> // Comienza el tooltip
<div class="left">
<img src="imagen" sytle="margin: 0 10px 5px 0" />
</div>
<div class="right">
<p><strong>Modelo:</strong> Serie 1 118d</p>
.........
.........
.........
</div>
</div> // Finaliza el tooltip
</div>
¿No es muy complicado verdad? Contaros por último que el tooltip lo podéis aplicar sobre cualquier capa, puede ser una imagen, un fondo, un texto, etc y para crearlo también se pueden utilizar imágenes o divs totalmente controlados por css.
