Voeg Simple Image Tooltip-labels toe met Taggd
Je weet hoe Facebook je laat label gezichten op foto's? Goed, Taggd is een beetje zoals het CSS / JS-equivalent punten gebruiken om te noteren waar tooltips op een afbeelding moeten verschijnen.
De bibliotheek is volledig gratis, en vereist geen afhankelijkheden zoals jQuery. Het werkt op pure vanille JavaScript, en het is super eenvoudig om in te stellen.
Je kunt iets meer leren van de Taggd-startpagina die bevat een demo en enkele basisstappen om te beginnen.
Er is ook een link naar de online documentatie Doclets gebruiken, een handige kleine web-app gemaakt voor JS-documentatie. Jij kan zoek Taggd-versies, of blader door de huidige versie in de hoofdtak.
Vanaf daar krijg je een enorme lijst met eigenschappen je kunt gebruiken. Elk document wordt opgesplitst door functies die werken op de afbeelding (zoals addTag () of gettag ()) gevolgd door functies die u helpen manipuleer specifieke tags (zoals SetPosition ()).
Nogmaals, alles werkt op vanilla JavaScript U hoeft zich dus geen zorgen te maken over syntaxis.
Starten bekijk de GitHub repo, en volg de installatie-instructies.
U voegt gewoon de Taggd CSS- en JS-bestanden toe in jouw sectie , en dan maak een nieuw exemplaar van de Taggd-elementen. Deze kunnen worden gedefinieerd een voor een of in een array.
Dan voeg ze toe aan een afbeelding, en presto! Je bent helemaal klaar om te gaan.
Ik zou het graag zien extra functies om de labellabels aan te passen, en verander hun vorm. Het zou geweldig zijn om een vierkant label te maken om een object te omringen in plaats van een kleine roze stip. Maar voor een gratis bibliotheek met geen afhankelijkheden, kan ik niet veel klagen.
Tot nu toe is deze bibliotheek gemaakt alleen voor moderne browsers, en ondersteunt geen sierlijke degradatie. Je kunt echter altijd een probleem op de repopagina openen of andere problemen proberen op te lossen als je er een paar ziet. Toch is Taggd nog steeds een echte plug-in, en het is praktisch in het gebruik voor elk project.
Bekijk de startpagina van de auteur voor voorbeeldcode en DL-koppelingen samen met een link naar de documentatiepagina.
En als je vragen of suggesties hebt, kun je de maker Tim Severien op Twitter @TimSeverien laten weten.
