40+ Hasznos eszköztippek CSS, JavaScript és jQuery parancsfájlok

Egy érdekes felhasználói felület elem, az eszköztippek (más néven infotips) egy kis doboz jelenik meg, amikor a az egérmutatót egy bizonyos szöveg vagy kép fölé helyezi információval a lebegő elemre vonatkozóan. A felhasználói élmény szempontjából az eszköztippek a leggyorsabb és legegyszerűbb információforrást biztosítják a felhasználóknak anélkül, hogy semmit kellene kattintania.

Bár a legegyszerűbb módja annak, hogy szerszámtippeket adjon a szövegéhez, a HTML-címke használata vagy TITLE =””, ALT =””. Van azonban néhány igazán hűvös a JavaScript és a CSS segítségével létrehozható eszköztippek és stílusok eszköztippek szkriptek használatával. Lássuk.

CSS

Balloon.css - A léggömb CSS könyvtár SasS és LESS interaktív eszköztipp megjelenítése. Az eszköztipp tartalma és helyzete a adat- tulajdonság. Az eszköztippet balra, jobbra vagy balra mutathatja. Még Emojis hozzáadása a tartalomhoz. A Balloon.cs-ek az NPM-en keresztül telepíthetők, vagy CDNJS-ből tölthetők le.

Simptip - Készült SasS segítségével, amely lehetővé teszi konfigurálja újra és fordítsa újra a kódot, hogy megfeleljen az Ön igényeinek. Az eszköztipp pozícióját és tartalmát az osztálynév és a data-tooltip tulajdonság. A Simptip elérhető egy NPM, Fonal és Bower csomag.

Hint.css - Az egyik legnépszerűbb CSS könyvtár, amely a Tooltip megjelenítésére szolgál, a Hint.css-t számos népszerű webhely, például a Fiverr, a Webflow és a Tridiv használja. Ellentétben a másik két CSS könyvtárral, Hint.css használ aria-label A méret és a szín az osztályneveken keresztül konfigurálható BEM módszertan alkalmazásával. A Hint.css elérhető az NPM, Bower és CDNJS rendszerekben.

mikrocsú - Egy másik félelmetes CSS-könyvtár, amely a beépített eszköztippek létrehozására szolgál “Megközelíthetőség” szem előtt tartva, Microtip felhasználások aria-label megtartani az eszköztipp tartalmát és adat- attribútum az eszköztipp méretének és pozíciójának beállításához.

CSS változót használ, amely lehetővé teszi az eszköztipp testreszabását egyszerű ol 'CSS fájl segítségével. A CSS változók számos web- és mobilböngészőben már támogatottak. A Microtip NPM, fonal csomag és UNPkg CDN.

Wenk - Ez csak 733 bájt. Szuper könnyű súlyú könyvtár egy CSSNext, LESS és SCSS segítségével szuper-modern CSS-ben íródott így testreszabhatja és újrafordíthatja a stílusokat a kívánt módon. A Wenk letölthető az NPM-ből, a fonalból és a következő ingyenes CDN-szolgáltatásokból: rawgit.com és unpkg.com.

Tooltippy - Egy másik könnyű CSS könyvtár csak kb. 1 KB-os. A Tooltippy több, előre elkészített témát is tartalmaz az eszköztipp kialakításához. Egy Stylus nevű CSS előfeldolgozóval íródott. Lásd az utasításokat, hogyan lehet kiterjeszti vagy testre szabhatja ezeket a témákat.

ElegantTips - Ez a könyvtár néhányat tartalmaz előre épített témák amely a megadott osztálynevekkel módosítható. Ellentétben a HTML5-re támaszkodó többi könyvtárral adat- vagy a aria-label Az ElegantTips megköveteli, hogy egy extra elem hozzáadásra kerüljön az eszköztipp létrehozásához. Ez lehetővé teszi szó szerint bármilyen tartalmat adjon az eszköztipphez egyszerű szövegen túl.

Tootik - Nem csak, hogy ez a CSS könyvtár a CSS, LESS és SasS formátumú stylsheet-et biztosítja, hanem egy könnyen használható GUI az eszköztipp testreszabásához. Egyszerűen másolhatja és beillesztheti az eszköz által létrehozott HTML-kódot. Ez ennyire egyszerű.

VanillaJS

TippyJS - A Popper.js által működtetett TippyJS egy bőséges lehetőségek az eszköztipp beállításához. Testreszabhatjuk az animációkat, az eszköztippet, a szélességet, a méretet, a témát, és sokkal többet. Lehetőség van visszahívási funkciók használatára is végrehajtson egy funkciót, amikor az eszköztipp látható és rejtett. Ezek a funkciók teszik a TippyJS-t az egyik leghatékonyabb JavaScript-könyvtárunknak a listán, hogy szerszámtepet hozzunk létre.

Darsain Tooltip - Ez a könyvtár biztosítja az eszköztár alapvető végrehajtását. Mégis, széleskörű lehetőségeket biztosít a gyártási viselkedés konfigurálásához, és a osztálynevek halmaza az eszköztipp megjelenésének megváltoztatásához. Az eszköztipp jól működik a régebbi böngészőkben, például az IE9-ben és, ha szükséges, IE8-ban néhány módosítással.

Bubb - A Bubb jól alkalmazható a fejlett JavaScript-felhasználók számára. A kiterjedt API-k, az egyszerű szöveg megjelenítése mellett, programozhatóan hozzáadhat összetettebb HTML-tartalmat az eszköztárhoz. Ez nagyon jó; a példákra hivatkozhat a Dokumentumokban.

Popper - Műszaki absztrakciót tartalmaz, ami valamit hoz létre “durran”, mint egy eszköztipp, egy popover és a legördülő menü. A TippyJS a könyvtár alapítványaként használja, és nagy nevek használják az interneten, például a Bootstrap, a Microsoft és az Atlassian.

YY Tooltip - A többi könyvtártól eltérően az YY Tooltip nem igényel HTML elem vagy attribútumok hozzáadását. Teljesen működik a JavaScript és a tartalom, a pozíció és a színek egy objektumban vannak definiálva, nem pedig HTML elemben. Tökéletes ahhoz, hogy teljes JavaScript-alkalmazással együtt használható legyen.

Position.js - Egy másik kiváló natív JavaScript-könyvtár, amely eszköztippeket hoz létre, a Position.js GUI-t biztosít a funkció konfigurálásához, és egyszerűen másolja és beilleszti az ott generált kódot. A Position.js használható a React.js vagy a Vue.js használatával.

Bezet Tooltip - Ez a könyvtár biztosítja 14 lehetőség az eszköztipp megjelenítéséhez; például a jobb, balra, alsó, bal-közép, jobbra-end, alulról Center, stb. Ezen túlmenően elég okos is ahhoz, hogy képes legyen állítsa be az eszköztipp pozícióját a rendelkezésre álló hely alapján az eszköztippet. Nézze meg a demót.

MouseTip - Ez a JavaScrtipt könyvtár létrehoz egy eszköztár, amely a kurzor pozíciójában mozog. Az eszköztipp nem szabványos mousetip- attribútum helyett a HTML5 használata adat- tulajdonság. Az Mousetip elérhető NPM modulként.

Internetips - A MousetTiphez hasonlóan a könyvtár által létrehozott eszköztipp a kurzor pozícióját követi. Mindent a JavaScript objektumon keresztül a HTML és a A modern böngészők számára is az attribútumok épülnek. Könnyű és gyors.

MTIP - JavaScript-könyvtár a Tooltiphez nagyszerű böngésző kompatibilitás. Ez kompatibilis az IE8-mal, amely teljes egészében testreszabható az Opciók segítségével, és hozzáadhatja az Tooltip-et bármelyik elemhez még egy img (képelem).

Bubblesee - egy könnyű JavaScript-könyvtár, amely az a “tooltip”. A JavaScript könyvtár könnyen kezelhető anélkül, hogy bonyolult opciókat kellene megadnia a kimenet testreszabásához. A Sass fájl akkor áll rendelkezésre, ha módosítani szeretné az eszköztipp megjelenését. Nézze meg a demót.

Tipfy - A modern JavaScript-szintaxissal, ES6-val épült, Tipfy csak 2 KB méretű. A könyvtár két fájlverziót biztosít: tipfy.min.js a forgatókönyvet modern ES6 szintaxis, és tipfy.es5.min.js ha kompatibilitást igényel a régebbi böngészőkkel. Használja adat- attribútum az eszköztipp testreszabásához; a adatok-tipfy-oldali, például az eszköztipp irányának és használatának beállítására szolgál data-tipfy-text attribútum az eszköztipp tartalom hozzáadásához.

jQuery

Tooltipster - Ez a könyvtár széles körű lehetőségeket kínál a szinte bármihez hasonlóan téma, animáció, érintés-támogatás, tartalom, nyitott és záró trigger, Ezenkívül egyéni eseményfigyelőt és visszahívásokat is biztosít, amelyek lehetővé teszik a fejlesztők számára, hogy az eszköztárat egyéni funkciókkal bővítsék. Továbbá, mivel egy jQuery plugin, a a tooltip régebbi böngészőben fog működni, mint az IE6, a jQuery verziótól függően használt.

Profi tipp - Egy másik kiterjedt jQuery plugin, a Protip 49 pozíciót támogat, HTML az eszköztipp tartalomhoz, ikon támogatás, egyéni visszahívások, és még sok más. A Protip olyan GUI-t biztosít, amely lehetővé teszi, hogy könnyedén testreszabhatja az eszköztippet.

PowerTip - Ez a jQuery plugin az opciókat és az API-kat is számos különböző módon nyújtja a fejlesztőknek az eszköztippek végrehajtásához. Támogatja billentyűzet navigáció; a felugró ablak megjelenése az elemekkel való navigáláskor Tab billentyűzet. A PowereTip elérhető NPM modulként. Használható a RequireJS és a Browserify használatával.

Elérhető Aria Tooltip - A JQuery plugin beépített beépíthetőséggel, az eszköztipp Úgy tervezték, hogy megjelenjen egy párbeszédpanel címével, többsoros szövegével és záró gombjával. Ez az egyik a saját listán.

TipsJS - Egy egyszerű jQuery plugin, mégis elég különlegességeket hoz. A a tooltip-tartalmat a data-tooltip tulajdonság. Mi több, az is, hogy a tartalmat speciális karakterekkel is csomagolhatjuk, hogy formázzuk a Markdown formázáshoz hasonló tartalmat. Tudjuk használni * hogy a tartalmat merészessé tegye, ~ dőlt, és ^ a fejléchez.

Sötét eszköztipp - Ez a könyvtár néhány hasznos szolgáltatást nyújt az eszköztipp bekapcsolásához. Például hozzáadhatunk egy megerősítés gomb - Igen és nem, a háttérképet az eszköztipp megjelenésekor elhomályosítja, és hozzáadhat HTML elemeket a tartalomhoz. Azt hiszem, tényleg meg kell nézni a bemutató oldalt.

Aria Tooltip - Ez a jQuery plugin egy beépített Accessibility funkcióval rendelkező WAI-ARIA 1.1 kompatibilis eszköz. Olyan módon reagál, amennyit csak tudsz különböző nézetablak-méretekhez különböző konfigurációkat biztosít. Az Aria Tooltip elérhető NPM modulként T-aria-tooltip.

Toolbar.js - Míg a másik jQuery plugin csak egyszerű szöveges vagy HTML tartalmat jelenít meg egy eszköztippben, ez A jQuery plugin egy eszköztárat hoz létre. Az eszköztipp két vagy több hivatkozást tartalmazna egy olyan ikonra, amely általában egy műveletet hajt végre kettyenés, tetszőleges eszköztár. Nézze meg a dokumentációt és a példákat.

VueJS

V-Tooltip - A V-Tooltip egy Vue.js komponens, amelyet a Popper.js a motorháztető alatt üzemeltet. Ez egy új irányelv v-tooltip amely hozzáadható bármely elemhez egy eszköztipp létrehozásához. A v-tooltip tartalmazhatja az eszköztipp tartalmát vagy az opciókat. A szokás mellett v-tooltip irányelv, akkor is hozzáadhatja az eszköztippet a v-popover összetevő. Ezzel az összetevővel lehet bonyolultabb tartalmat adjon az eszköztippbe Vue.js összetevővel vagy HTML-vel.

Vue-Bulma Tooltip - A Vue.js összetevője a Bulma UI keretrendszeren alapuló eszköztipp létrehozásához. Ez a könyvtár a Vue Bulma összetevője. De a az eszköztip komponens elérhető NPM modulként vue-Bulma-tooltip hogy önálló komponensként használhatja.

Vue-irányelv-Tooltip - Összességében hasonló a Popper.js alapú V-Tooltip összetevőhöz, és ugyanazt az irányelvet írja le v-tooltip. Úgy tűnik azonban, hogy nem nyújtja a v-popover összetevő.

Vue-Tippy - Ez a könyvtár a Tippy.js-t egy Vue.js összetevővé tekinti. Ez egy egyéni Vue.js irányelvet tartalmaz v-dülöngő amely HTML-attribútumként működik; hozzáadhatunk tartalmat az eszköztipphez vagy annak beállításához. Azt is teszi a egyéni Vue.js összetevő az eszköztipp tartalomban a html választási lehetőség.

VueJS-Popover - Egy egyéni Vue.js nevű, egyéni irányelvvel hívják v-popover és két egyéni összetevő és rugalmasságot biztosít a fejlesztők számára, hogy a Vue.js alkalmazásban szerszámtippeket adhassanak hozzá.

Vue-Tipp - A Hint.css-t csomagoló Vue.js bővítmény. A bővítmény funkciói V-célzást-CSS az eszköztipp hozzáadásához. Azt ugyanazokat a lehetőségeket hozza létre, mint a Hint.css, így hozzáadhatja őket JavaScript objektumként vagy Vue.js módosítóként.

ReactJS

Reagáljon Joyride-re - Egy React összetevő, amely egy olyan eszköztippet jelenít meg, amelyik lesz vezesse az új felhasználókat az új alkalmazás megismeréséhez.

Reagál a Floaterre - Ez a könyvtár a Popper.js-t egy Floater nevű React összetevővé tekinti, így ugyanolyan jó tulajdonságokkal rendelkezik, mint a Floater. Hozzáadhatsz eszköztippet és felugró ablakot, és akkor is játszani ezzel a komponenssel a homokozón keresztül.

React Autotip - Egy egyszerű React komponens az automatikus pozicionálási funkcióval, az Autotip lesz automatikusan beállítja az eszköztipp pozícióját amikor a rendelkezésre álló hely megváltozik.

Reagál Tippy-re - Tippy.js és Popover.js tetején épült. Ez a könyvtár a Tooltip komponens a React alkalmazásba is beletartozhat.

Reagál Hint - A Hint.css kiterjesztése. Az összetevők néhány olyan funkciót adnak hozzá, amelyek nem érhetők el a Hint.css-ben, például: automatikus pozíció, késleltetés és visszahívási funkció.

Több

Emberi eszköztippek - A Ember.js összetevő az eszköztippek létrehozásához, a Popper.js tetejére épül. Az összetevőt a Accessibility szem előtt tartva is tervezték, és folyamatosan javul, hogy megfeleljen az 508-as betarthatóságnak.

D3 Tipp - D3.js bővítmény. A D3.js egy JavaScript könyvtár az adatmegjelenítéshez, mint például diagramok, térképek, diagramok, stb. Ez a bővítmény lehetővé teszi az eszköztipp megjelenítése ezen adatok tetején.