Útiles tutoriales de información sobre herramientas y complementos de jQuery

La información sobre herramientas es un elemento común de la interfaz gráfica de usuario. Se utiliza junto con un cursor, normalmente un puntero de ratón. El usuario pasa el cursor sobre un elemento, sin hacer clic en él, y puede aparecer una información sobre herramientas: un pequeño "cuadro flotante" con información sobre el elemento sobre el que se pasa el cursor.

He compilado algunos tutoriales y complementos de jQuery para información sobre herramientas.

1. TinyTips: complemento ligero de jQuery para información sobre herramientas

TinyTips es un complemento de jQuery muy liviano que brinda la capacidad de agregar información sobre herramientas a casi cualquier elemento de una página. Completamente documentado y amigable con el diseñador.

2. Etiquetado de fotos estilo Flickr usando jQuery

jQuery Photo Tagger viene con alrededor de 1,000 líneas de código. Como tal, puede consultar la página del proyecto o probar la demostración en línea por sí mismo. Tenga en cuenta que debe mantener presionada la tecla CTRL al hacer clic con el mouse para crear un punto de acceso.

demostración | Descargar

3. TipTip Custom Tooltip jQuery Plugin con cero imágenes

TipTip usa el atributo de título al igual que la información sobre herramientas del navegador nativo. Sin embargo, el título se copiará y luego se eliminará del elemento al usar TipTip para que no aparezca la información sobre herramientas del navegador.
TipTip solo genera un conjunto de elementos emergentes en total, en lugar de generar un conjunto de elementos emergentes para cada elemento con TipTip aplicado. Esto ayuda a acelerar las cosas y reduce el tiempo de procesamiento. Los elementos generados son todos elementos div y se agregan al final del elemento del cuerpo.

4. Cómo construir las nuevas anotaciones visuales con CSS3

ZURB nos ha enseñado cómo construir las nuevas anotaciones visuales. La solución no era técnicamente demasiado compleja. Con Notable, han adoptado el concepto de degradación elegante: aprovechan las nuevas técnicas de CSS que degradan limpiamente a navegadores más antiguos.

Manifestación

5. Muestre sus enlaces como una lista desplegable con Pluralink

Pluralink es un increíble complemento de javascript para organizar múltiples enlaces en su texto.

6. Efecto de desplazamiento en escala de grises con CSS y jQuery

El efecto de desplazamiento en escala de grises con CSS y jQuery se basa en CSS Sprites y algunas líneas de jQuery, pero requiere un poco de preparación antes de que pueda implementarse. No se recomienda para proyectos a gran escala y probablemente sea mejor para mostrar piezas de cartera.

7. Obtenga una mirada más cercana con AnythingZoomer jQuery Plugin

Tienes un área pequeña. Pasas el mouse sobre él. Aparece un área que le ofrece una vista ampliada más de cerca. Este es un complemento de jQuery que lo hace. No voy a decirle para qué debe usarlo o elaborar escenarios de casos de uso. Tu propia creatividad puede ayudarte allí.

Manifestación

8. Cree una información sobre herramientas rica en contenido con JSON y jQuery

Este tutorial demostrará cómo crear información sobre herramientas que funciona con jQuery, con información extraída de una matriz JSON.

Manifestación

9. Reemplace su información sobre herramientas predeterminada con Pretty (mb) Tooltip

(mb) Tooltip es una hermosa información sobre herramientas para su página web en jQuery.

Descargar

10. Captify muestra bonitas leyendas de imágenes que aparecen al pasar el ratón por encima

Captify es un complemento para jQuery escrito por Brian Reavis para mostrar subtítulos de imágenes bonitos y simples que aparecen en el rollover. Ha sido probado en Firefox, Chrome, Safari y el miserable Internet Explorer. Captify se inspiró en ImageCaptions, otro complemento de jQuery para mostrar subtítulos como estos.

11. Vista previa de imágenes con imgPreview jQuery Plugin

Peter Higgins ha creado Dojo Zoomer. Se divide en 3 paneles. Al pasar el cursor sobre la imagen en el panel izquierdo, el panel derecho muestra dinámicamente la parte recortada de la imagen, para que pueda enfocarse explícitamente en la parte de la imagen principal que le interese.

12. jQuery Javascript Image Magnifier bajo GPL

JQZoom es una lupa de imágenes de javascript construida en la parte superior del popular jQuery javascript framework. jQzoom es un script excelente y realmente fácil de usar para ampliar lo que desea.

13. Información sobre herramientas transparente simple con jQuery y CSS

La información sobre herramientas de CSS es muy popular en el diseño web moderno y, contrariamente a la creencia popular, es muy fácil crearla, especialmente con uno de los marcos de JavaScript tan populares.

Manifestación

14. Caja de herramientas mágica: herramientas de zoom de imagen Flash y Javascript

Magic Toolbox ha creado 2 increíbles herramientas de zoom de imágenes de javascript (Magic Zoom y Magic Magnify). Magic Zoom es una herramienta de zoom de JavaScript. Es la mejor manera de mostrar imágenes con un detalle increíble.

15. Prototip 2: cree hermosos consejos sobre herramientas con facilidad

Prototip le permite crear fácilmente información sobre herramientas simples y complejas utilizando el marco de JavaScript de Prototype.

Manifestación

16. Información sobre herramientas y vista previa de imagen más fáciles con jQuery

La información sobre herramientas más fácil y la vista previa de imagen es una de esas burbujas emergentes similares a la información sobre herramientas que aparece cuando pasa el cursor sobre un enlace o una miniatura.

Manifestación

17. Información sobre herramientas de burbujas emergentes de estilo Coda con jQuery

Coda es una de las nuevas herramientas de desarrollo web para Mac, y es popular entre los diseñadores y desarrolladores.

18. La región de la imagen en la que se puede hacer clic de Taggify muestra información sobre herramientas emergente

Taggify es un widget web que permite a los blogueros y editores mejorar sus sitios agregando información sobre herramientas de imágenes vinculadas a ciertas regiones de imágenes.
Manifestación

19. Información sobre herramientas de burbuja discreta con Javascript y CSS

La información sobre herramientas de burbujas es una manera fácil de agregar (a través de un poco de CSS y javascript) información sobre herramientas elegante con forma de globo a cualquier página web.

Manifestación

20. Información sobre herramientas de aparición y desaparición gradual para Prototype y Scriptaculous

CoolTips es una técnica de reemplazo de información sobre herramientas de navegador web de JavaScript ligera y discreta.
CoolTips se utiliza para reemplazar la información sobre herramientas del navegador web convencional. La información sobre herramientas obtiene el contenido del atributo de título, por lo que es completamente discreto. CoolTips es una clase OO basada en frameworks Prototype JS y script.aculo.us.

21. Dulces títulos transparentes y desvanecimientos Tooltips

Sweet Titles Fading Tooptips no es una imitación de NICE Titles ni intenta mejorar el intento revisado de Dunstan. Y definitivamente no está extraído de uno de esos scripts infestados de controladores de eventos de Dynamic Drive.

Manifestación

22. Prototip La mayoría de las características Tooltips para Prototype

Prototip le permite crear fácilmente información sobre herramientas simples y complejas utilizando el marco de JavaScript de Prototype. Si también usa Scriptaculous, incluso puede agregarles algunos efectos agradables.

Manifestación

23. Información sobre herramientas ligeras de BoxOver DHTML/Javascript

BoxOver usa javascript / DHTML para mostrar información sobre herramientas en un sitio web. Sin embargo, la implementación de la información sobre herramientas no requiere conocimientos de DHTML o javascript. Hay muchos ajustes que se pueden configurar para personalizarlo según sus necesidades configurando a través del atributo "título" de una etiqueta.