Usando un plugin para jquery voy a explicar como colocar tooltips en un mapa de imagen.
HTML del mapa de imagenes
Es practicamente igual que cualquier mapa de imagenes, title es la descripcion
[cc lang=»html»]
[/cc]
Agregar el plugin
Para agregar jquery y e plugin bastan un par de lineas de codigo
[cc lang=»javascript»]
[/cc]
Al plugin lo podemos configurar con una sola linea de codigo, pero yo voy a agregarle algunos detalles adicionales
[cc lang=»javascript»]
[/cc]
Estilos para el tooltip
Estos varian segun lo que querramos hacer, lo mas importante es la position absolute y el z-index
[cc lang=»css»]
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #eee;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
#tooltip.pretty {
border: none;
width: 210px;
padding:20px;
height: 135px;
opacity: 0.8;
background: url(‘shadow.png’);
}
[/cc]
