Los tooltips son herramientas de ayuda visual las cuales funcionan al situar o pulsar con el mouse sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.por ejemplo:
Si deseamos hacerlo sobre Web, un ejemplo seria el alt en imágenes o el title en enlaces , pero si queremos personalizar Tooltips, podemos hacerlo através de JavaScript o CSS, la cual dependerá el gusto de cada quien, para mi, se me hizo más sencillo crear tooltips por medio de CSS.Los pasos para crear tu propio tooltip con CSS + HTML son:
Hoja de Estilo:
Definir los colores de los enlaces por default:
a{font:15px Geneva, Arial, Helvetica, sans-serif; color:#CCCCCC; text-decoration:none;}
a:hover{border-bottom: 1px dashed #CCCCCC;}
Nuesto tooltip tiene el siguiente diseño:
a.tooltip:hover {text-decoration:none;}
a.tooltip span {display:none; margin:0 0 0 10px; padding:5px 5px; }
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#666666;}
HTML
Para que funcione nuestro tooltip, nuestros enlaces deben lucir de esta forma:<a href="#" class="tooltip">EJEMPLO<span>Esto se mostrará al pasar el mouse sobre EJEMPLO</span></a>
¿Cual es el truco?
El truco es en que en la clase tooltip, declaramos el span como no visible, hasta que el mouse se posicione arriba, este se mostrará en línea, además le asignamos el diseño del dicho tooltip en el hover de la clase tooltip, no antes. Para poder posicionar en donde quieran el tooltip, lo hacen por medio del tooltip span el cual yo le asigne un margin y padding a mi gusto, ustedes pueden personalizar más este tooltip.
9 comentarios:
hola, oye una pregunta si lo quisiera hacer sobre una imagen o un map, que tendria que hacer, soy nuevo en esto y peus ya intente moverle al codigo que hiciste y pues nomas no funciona :(. gracias
Hola,
Si observaste, tenemos un enlace, y dentro del enlace pues colocamos texto, pues simplemente quita el texto y agrega la imagen dentro de las etiquetas del enlace, y de igual forma deja las etiquetas span que serán las que se verán al pasar el mouse sobre la imagén.
YA MODIFIQUE EL EJEMPLO, Y AÑADI UN EJEMPLO CON IMAGEN, VELO >
http://dl.getdropbox.com/u/363073/development/css/tooltip-css.html
muchiiisisisimas gracias
utilice su codigo: el de crear tooltips, muchas gracias. Dios lo bendiga.
De nada un fuerte abrazo!
una consulta, si quisiera hacer que parezca una imagen en lugar de un texto cuando hago roll over sobre el texto cómo haría? Gracias!
Muy sencillo, puedes agregar directamente la imagen dentro de la etiqueta de span o la mejor opción es agregar background a dicha etiqueta directamente desde CSS
.tooltip span{
background:url(imagen.png) no-repeat 0 0;
}
y quizas en el a.tooltip:hover span, tengas que poner en vez de display:inline, por display:block
Saludos!
gracias amigo , habia encontrado un tutorial similar pero agregaba mucha css en la position y en display, a las finales el span no salia del ancho de la imagen y no se veia al costado, estuve a punto de tirar la toalla muchas horas buscando, con dolor de cabeza pero me has solucionado la vida. muy agradecido.
hay un problema no funciona dentro de un post.
Publicar un comentario