1. Inicio
  2. Pregunta y respuesta
  3. Recomendaciones para la información sobre herramientas de jQuery

Recomendaciones para la información sobre herramientas de jQuery

2009-02-12 12 views
18

Estoy buscando complementos de información sobre herramientas para jQuery que permitan el siguiente tipo de comportamiento.Recomendaciones para la información sobre herramientas de jQuery

<a href="somewhere.html"> 
<span> 
    <img src="someimage.jpg" style="display: none;" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

El comportamiento que estoy esperando es que se ciernen sobre "Aquí está el enlace a alguna parte" y tienen un tooltip que muestra el contenido de la extensión que contiene "someimage.jpg" y "Aquí está la información sobre herramientas contenido".

Preferiría que la información sobre herramientas rastree junto con el movimiento del mouse sobre el enlace y que la apariencia de la información sobre herramientas (color de fondo, opacidad, color de borde, etc.) sea configurable.

Las dos sugerencias más populares que he encontrado, "clueTip" y "Tooltip" de Jörn Zaefferer no parecen encajar en la factura, a menos que me falta algo.

En última instancia, los enlaces y las imágenes se generarán dinámicamente.

Fuente

2009-02-12 jerome

Respuesta

4

¿Tiene que ser jQuery? Puedes hacerlo con solo CSS si quieres.

a.info 
{ 
    position: relative; 
    z-index: 24; 
} 

a.info:hover 
{ 
    z-index: 25;  
} 

a.info span 
{ 
    display: none; 
} 

a.info:hover span 
{ 
    display: block; 
    position: absolute; 
    top: 2em; 
    left: 2em; 
    width: 15em; 
    padding: 6px; 
    border: 1px solid black; 
    background-color: #eeeeee; 
    color: #000; 
}

Luego puede usarlo tal como lo tiene.

<a href="somewhere.html" class="info"> 
<span> 
    <img src="images/someImage.jpg" /> 
    Here is the tooltip content. 
</span> 
Here is the link to somewhere. 
</a>

EDITAR

Lectura mi dosis diaria de blogs this article me llamó la atención. Crean un plugin jquery que hace lo que quieres, muestra una imagen con opciones de estilo y movimiento del mouse. Mira el resultado aquí.

http://james.padolsey.com/demos/imgPreview/full/

Usted debe ser capaz de seguir el tutorial bien y escribir el plugin o descargar el plugin de ejemplo.

Fuente

2009-02-12 21:25:07 Jab

+0

derecho. De hecho, utilizamos algo similar en el sitio que desarrollo actualmente. Estaba interesado en poder hacer que la información sobre herramientas rastree los movimientos del mouse. Gracias. – jerome

+0

Hm. Esto no parece funcionar correctamente en IE6. – jerome

+0

Mira mi edición, creo que podría ser justo lo que estás buscando. – Jab

8

que le dice la verdad, he intentado un par de ellos, pero yo me quedo con uno que realmente me gusta:

http://craigsworks.com/simpletip/sandbox/

¡hay muchas cosas que puedes cambiar y se ven fantásticas en cualquier lugar! :)

alt text http://www.balexandre.com/temp/StackOverflow_jquerySimpleTip.png

Actualizado

Como dijo PBZ, esto ya no está disponible para infrangiments de derechos de autor, pero lo mismo se puede encontrar en el revelador 'original' en

http://www.nickstakenburg.com/projects/prototip2/

Fuente

2009-02-13 14:54:55 balexandre

+0

El sitio ya no funciona y el componente ya no está disponible. – pbz

+0

Una respuesta con más de 1 año y medio ... me encantaría saber por qué downvote! – balexandre

0

También he construido a jQuery plugin for tooltips - es realmente pequeño - 5KB minificado, muy fácil de configurar y usar, y con muchas opciones de configuración; posicionará las puntas dentro de la ventana gráfica independientemente del desplazamiento vertical/horizontal o del tamaño de la ventana; El ancho y el color de fondo se pueden cambiar en la inicialización. No usó imágenes en absoluto: utiliza CSS para todo lo que se desea y se degrada graciosamente para los navegadores más antiguos. Funciona incluso en IE6 :) Y, por defecto, se ve así:

Screenshot

Fuente

2013-04-28 18:20:43

Cuestiones relacionadas

 Cuestiones relacionadas