Egyszerű Image Tooltip címkék hozzáadása a Taggd használatával

Tudod, hogyan teszi lehetővé a Facebook címke arcok képekben? Jól, Taggd olyan, mint a CSS / JS egyenértékű pontok használatával ahol az eszköztippek megjelenhetnek a képen.

A könyvtár teljesen ingyenes, és nem igényel függőségeket például a jQuery. Azt tiszta vanília JavaScript-en fut, és szuper könnyű beállítani.

A Taggd honlapján egy kicsit többet is megtudhatsz tartalmaz egy demót és néhány alapvető lépést az induláshoz.

Van egy link is a online dokumentáció a Doclets segítségével a JS dokumentációhoz készült, apró webes alkalmazás. tudsz keresés Taggd verziókban, vagy böngészhet az aktuális verzióban a mesterágazatban.

Innen kapsz egy hatalmas lista a tulajdonságokról Te tudod használni. Minden doc függvény szerint osztódik működik a képen (mint például címke hozzáadása() vagy getTag ()), amelyet olyan funkciók követnek, amelyek segítenek manipulálhat bizonyos címkéket (mint például setPosition ()).

Ismét mindent vanília JavaScript-en fut így nem kell aggódnia a szintaxis problémái miatt.

Az induláshoz nézd meg a GitHub repót, és kövesse a beállítási utasításokat.

Csak hozzáadja a Taggd CSS és JS fájlokat a saját szakasz , és akkor hozzon létre egy új példányt A Taggd elemek Ezek meghatározhatók egyenként vagy egy tömbben.

Azután csatolja őket egy képhez, és presto! Mindannyian be kell mennie.

Szeretném látni extra funkciók a címke címkék testreszabásához, és változtassa meg alakjukat. Érdemes lenne egy négyzet alakú címkét létrehozni egy tárgy körül, nem pedig egy kis rózsaszín pontot. Egy nulla függőségű szabad könyvtár számára azonban nem tudok sokat panaszkodni.

Eddig ez a könyvtár készült csak a böngészők számára, és nem támogatja a kecses degradációt. Mindazonáltal mindig problémát nyithat meg a repo oldalon, vagy próbálhat más problémákat megoldani, ha egyszerûeket lát. Mindazonáltal a Taggd még mindig egy plugin, és minden projekthez hasznos.

Nézze meg a szerző honlapját minta kód és DL linkek együtt a link a dokumentációs oldalra.

És ha bármilyen kérdése vagy javaslata van, nyugodtan mondja el Tim Severien alkotóját a Twitter @TimSeverien-ről.