Inicio
Blog
Contacto
Afiliados/Afiliate
Staff
tooltips
Crear enlaces con tooltips
Aquí les dejo este tutorial que sirve para que los links de su web muestren un tooltip dando una descripcion hasta con imagen.
vista previa
- El margen de beneficio - HTML
Quería mantener el formato lo más simple posible, pero al mismo tiempo lo suficientemente flexible como para adaptarse a distintos escenarios que se encuentran. El enlace principal tendrá el nombre de clase de "tip_trigger" para iniciar la descripción, y una clase de "punta" para mantener la descripción de contenido en su interior.
Codigo:
| <a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a> |
- Los estilos - CSS
El estilo es muy simple, y me gustaría animarles a ser creativo con esto para sus propios proyectos. La descripción se oculta de manera predeterminada, a continuación, provocada por jQuery para mostrarlo en vuelo estacionario. Le damos una posición absoluta y un z-index de 1000 para asegurarse de que se queda en la capa superior de sus elementos.
Codigo:
| .tip { color: #fff; background:#1d1d1d; display:none; /*--Hides by default--*/ padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } |
La Magia - jQuery
Para aquellos que no están familiarizados con jQuery, lo echa un vistazo a su primer sitio y obtener una visión general de cómo funciona. He compartido algunos trucos que he recogido a lo largo del camino, usted puede comprobar ésos hacia fuera también.
Paso inicial - Llame al archivo de jQuery
Usted puede optar por descargar el archivo desde el sitio de jQuery, o puede utilizar esta alojado en Google.
Codigo:
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> |
Directamente después de la línea en la que llama su jQuery, iniciar una nueva etiqueta y comenzar su código mediante el $ (document). Evento ready. Esto permite que el código jQuery para ejecutar el instante en que el DOM está listo para ser manipulado.
Codigo:
| $(document).ready(function() { //Tooltips $(".tip_trigger").hover(function(){ tip = $(this).find('.tip'); tip.show(); //Show tooltip }, function() { tip.hide(); //Hide tooltip }).mousemove(function(e) { var mousex = e.pageX 20; //Get X coodrinates var mousey = e.pageY 20; //Get Y coordinates var tipWidth = tip.width(); //Find width of tooltip var tipHeight = tip.height(); //Find height of tooltip //Distance of element from the right edge of viewport var tipVisX = $(window).width() - (mousex tipWidth); //Distance of element from the bottom of viewport var tipVisY = $(window).height() - (mousey tipHeight); if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport mousex = e.pageX - tipWidth - 20; } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport mousey = e.pageY - tipHeight - 20; } //Absolute position the tooltip according to mouse position tip.css({ top: mousey, left: mousex }); }); }); |
La lógica
1. Ubicación del caché. Selector de punta
Ajuste variable de la punta y la memoria caché de la ubicación de dólares (este). Find ('. Punta'). Esta ubicación en caché evitar recorridos múltiples libertad.
2. Pase el ratón en este lugar y flotar fuera
Cuando se cierne sobre el gatillo, el show. Punta,
en vuelo estacionario a ocultar la. punta
3. Ratón sobre
Cuando el ratón entra en el gatillo, iniciar el seguimiento de las coordenadas X e Y del ratón usando el e.pageX y e.pageY. Nota añadimos 20px para darle un respiro del puntero a la descripción.
4. Establecer las variables de
También tomamos en consideración para el caso en la descripción excede las coordenadas X e Y de la vista. Cuando esto sucede, queremos dar la vuelta a la posición de la descripción para el otro lado. Para obtener los valores de esta nueva posición volteada, debemos obtener el alto y ancho de nuestra descripción (tipWidth y tipHeight). Para detectar cuando el indicador se superó la vista, hay que restar la coordenadas X e Y (las coordenadas se agregan con la anchura y la altura de la descripción) de la anchura de la vista y la altura.
5. Si Tooltip Supera Ver horizontal
Si la descripción supera la visión horizontal de la ventana, que tapa la descripción para el lado izquierdo del ratón. Calculamos esta restando la descripción de ancho por la coordenada X del ratón.
6. Si Tooltip Supera Ver vertical
Si la descripción supera la visión vertical de la ventana, que tapa la descripción de la parte superior del ratón. Calculamos esta restando la descripción de altura por la coordenada del ratón.
7. Por defecto ...
Si la descripción no exceda el punto de vista vertical y horizontal de la ventana (por defecto), que la posición de la descripción de la parte inferior derecha del ratón. CSS se inyecta para ajustar el posicionamiento de la izquierda y de arriba a seguir el ratón.
Las cosas para mantener Nota de:
Usted verá que hay dos eventos que se encadenaron en esta función. El vuelo estacionario. () Y. Mouseover (), echar un vistazo a la documentación de ambos si no está familiarizado con las diferencias. También se dará cuenta de la declaración, si a continuación, otra de tipVisX <20 y tipVisY <20. El 20px se utiliza para tomar en consideración el relleno 10px (abajo arriba o hacia la derecha a la izquierda) en la descripción.
Este ejemplo que les voy a poner no viene en el tutorial original en ingles pero lo agrego solo para que se den una idea de como quedaría el codigo completo.
Codigo:
| <html> <head> <title>para el tuto</title> <style type="text/css"> body { margin: 0; padding: 0; font: normal 12px Verdana, Geneva, sans-serif; line-height: 1.8em; color: #333; } a { color: #d60000; text-decoration: none; } .tip { color: #fff; background:#1d1d1d; display:none;/*--Hides by default--*/ padding:10px; position:absolute; z-index:1000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .container { width: 960px; margin: 0 auto; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Tooltips $(".tip_trigger").hover(function(){ tip = $(this).find('.tip'); tip.show(); //Show tooltip }, function() { tip.hide(); //Hide tooltip }).mousemove(function(e) { var mousex = e.pageX + 20; //Get X coodrinates var mousey = e.pageY + 20; //Get Y coordinates var tipWidth = tip.width(); //Find width of tooltip var tipHeight = tip.height(); //Find height of tooltip //Distance of element from the right edge of viewport var tipVisX = $(window).width() - (mousex + tipWidth); //Distance of element from the bottom of viewport var tipVisY = $(window).height() - (mousey + tipHeight); if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport mousex = e.pageX - tipWidth - 20; } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport mousey = e.pageY - tipHeight - 20; } tip.css({ top: mousey, left: mousex }); }); }); </script> <div class="container"> <a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a> </div> </body> </html> |
Enlace: ForoTokarg
Compartir este tutorial:
