tutorial por para nombre etiquetas elementos directives directivas código cuál crear con como atributo archivo agregar jquery tooltip

por - Recomendaciones para la información sobre herramientas de jQuery



cuál es el nombre del archivo para código angularjs por default (15)

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

<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 pasar el cursor sobre "Aquí está el enlace a algún lado" y tener una ventana emergente emergente que muestra el contenido del tramo que contiene "someimage.jpg" y "Aquí está el contenido de la información sobre herramientas".

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.

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

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


jQuery UI ahora tiene un módulo integrado de información sobre herramientas: http://jqueryui.com/tooltip/

Funciona bien y es fácilmente personalizable.





¿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; }

Entonces puedes usarlo tal como lo tienes.

<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

Al leer mi dosis diaria de blogs, me llamó la atención este artículo . 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/

Debería poder seguir el tutorial y escribir el plugin o descargar el plugin de ejemplo.









También he creado un plugin jQuery para información sobre herramientas , es realmente pequeño, 5 KB 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í:


NewTip ->

New Tooltip JQuery plugin with support in browsers from IE7+, Firefox, Chrome

Muy atractivo y fácil de personalizar tanto para eventos de devolución de llamadas como para cualquier tipo de elemento.

darle una oportunidad :

Registro de complementos de JQuery: http://plugins.jquery.com/newtip/

Página de inicio de Github: https://github.com/chandra7mca/newtip