Añadir etiquetas de imagen simple Tooltip con Taggd

Ya sabes cómo Facebook te permite etiquetar caras en las fotos? Bien, Taggd es un poco como el equivalente CSS / JS usando puntos para anotar donde deberían aparecer las informaciones sobre herramientas en una imagen.

La biblioteca es completamente gratuita, y no requiere ninguna dependencia como jQuery. Eso se ejecuta en JavaScript puro de vainilla, y es muy fácil de configurar.

Puedes aprender un poco más de la página de inicio de Taggd que Incluye una demo y algunos pasos básicos. para empezar.

También hay un enlace a la documentación en línea Usando Doclets, una pequeña aplicación web hecha para la documentación de JS. Usted puede buscar versiones de taggd, o navegar por la versión actual en la rama maestra.

A partir de ahí, obtendrás un enorme lista de propiedades puedes usar. Cada documento está dividido por funciones que operar sobre la imagen (como añadir etiqueta() o getTag ()) seguido de funciones que te ayudan manipular etiquetas específicas (como posición de ajuste()).

De nuevo, todo funciona en vainilla JavaScript para que no tenga que preocuparse por los problemas de sintaxis.

Para empezar Echa un vistazo a la repo de GitHub, y siga las instrucciones de configuración.

Simplemente agregue los archivos Taggd CSS y JS en tu sección , y entonces crear una nueva instancia de los elementos taggd. Estos pueden ser definidos uno a uno o en una matriz.

Entonces adjuntarlos a una imagen, y presto! Estás listo para ir.

Me encantaría ver Características adicionales para personalizar las etiquetas de etiquetas, y cambiar su forma. Sería increíble crear una etiqueta cuadrada para rodear un objeto en lugar de un pequeño punto rosado. Pero para una biblioteca gratuita con cero dependencias, no me puedo quejar mucho..

Hasta ahora esta biblioteca está hecha. solo para navegadores modernos, y no soporta la degradación agraciada. Sin embargo, siempre puede abrir un problema en la página de recompra o tratar de resolver otros problemas si ve alguno sencillo. Sin embargo, Taggd sigue siendo un gran complemento, y es práctico de usar para cualquier proyecto..

Echa un vistazo a la página de inicio del autor para Código de muestra y Enlaces DL junto con un enlace a la página de documentación.

Y si tiene alguna pregunta o sugerencia, no dude en enviar un mensaje al creador Tim Severien en su Twitter @TimSeverien.