40+ Užitočné skripty Tooltips s CSS, JavaScript a jQuery
Zaujímavý prvok používateľského rozhrania, popisy nástrojov (tiež nazývané infotipy), vytvárajú malé pole, keď sa zobrazí kurzor myši sa pohybuje nad určitým textom alebo obrázkom s informáciami pokiaľ ide o prvok, ktorý sa vznáša. Pokiaľ ide o skúsenosti používateľov, popisy nástrojov poskytujú používateľom najrýchlejší a najjednoduchší zdroj informácií bez toho, aby ste museli kliknúť na nič.
Aj keď najjednoduchší spôsob, ako pridať popisy do textu, je použitie značky HTML alebo TITLE =””, ALT =””. Avšak, tam sú niektoré naozaj cool návrhov štýlov a štýlov, ktoré môžete vytvoriť pomocou jazyka JavaScript a CSS pomocou skriptov nástrojov. Pozrime sa.
CSS
Balloon.css - Balón je knižnica CSS zložený zo SasS a LESS na zobrazenie interaktívneho popisu nástroja. Obsah a pozícia nápoveda sú konfigurovateľné cez dáta- atribútov. Môžete zobraziť nápovedu vľavo, vpravo alebo vpravo doľava. Môžete dokonca pridajte Emojis k obsahu. Balloon.css možno nainštalovať prostredníctvom nástroja NPM a načítať ho z CDNJS.
Simptip - Vyrobené s možnosťou SasS prekonfigurujte a skompilujte kód podľa svojich požiadaviek. Pozícia a obsah nástroja je konfigurovateľný pomocou názvu triedy a Data-tooltip atribútov. Simptip je k dispozícii ako Balíček NPM, Priadza a Bower.
Hint.css - Jeden z populárnych knižníc CSS na zobrazenie tooltipu, Hint.css používajú mnohé populárne webové stránky ako Fiverr, Webflow a Tridiv. Na rozdiel od ostatných dvoch knižníc CSS, Hint.css používa aria-label Veľkosť a farbu môžete konfigurovať pomocou názvov tried pomocou metodiky BEM. Hint.css je k dispozícii na zariadeniach NPM, Bower a CDNJS.
mikrohrotem - Ďalšia úžasná knižnica CSS pre vytváranie tooltipu “prístupnosť” v duchu Microtip použitie aria-label držať obsah popisu a dáta- atribút na konfiguráciu veľkosti a polohy popisku.
Používa premennú CSS, ktorá vám umožňuje prispôsobiť popis nástroja jednoduchým súborom CSS. Premenné CSS sú už podporované v mnohých webových a mobilných prehliadačoch. Microtip je k dispozícii ako balíček NPM, Priadza a UNPkg CDN.
Wenk - Je to len 733 bajtov. Veľmi ľahká knižnica napísaný v supermodernom CSS pomocou CSSNext, LESS a SCSS takže môžete prispôsobiť a kompilovať štýly tak, ako sa vám páči. Wenk možno prevziať z NPM, priadze a nasledujúcich bezplatných služieb CDN: rawgit.com a unpkg.com.
Tooltippy - Ďalší ľahká knižnica CSS pričom má veľkosť približne 1 KB. Tooltippy obsahuje niekoľko vopred pripravených motívov pre štýl bubliny. Je napísaný s pre-procesormi CSS s názvom Stylus. Pozrite si pokyny, ako môžete rozšíriť alebo prispôsobiť tieto témy.
ElegantTips - Táto knižnica prichádza s niekoľkými vopred pripravených tém ktoré môžu byť zmenené s poskytnutými názvami tried. Na rozdiel od ostatných knižníc, ktoré sa spoliehajú na HTML5 dáta- alebo aria-label atribút ElegantTips vyžaduje dodatočný prvok pridaný do nástroja. To vám umožní pridať doslova ľubovoľný obsah do popisu nad rámec jednoduchého textu.
Tootik - Nielenže táto knižnica CSS poskytuje šablónu štýlov vo formáte CSS, LESS a SasS, poskytuje tiež ľahko použiteľné grafické rozhranie na prispôsobenie popisu nástroja. Môžete jednoducho skopírovať a vložiť HTML vytvorené týmto nástrojom. Je to tak jednoduché.
VanillaJS
TippyJS - Powered by Popper.js, TippyJS prichádza s množstvo možností na konfiguráciu popisku. Môžeme prispôsobiť animácie, šípku nástroja, šírku, veľkosť, tému a oveľa viac. Poskytuje tiež funkcie spätného volania, pomocou ktorých môžete vykonajte funkciu, keď sa zobrazuje a skryje popiska. Tieto funkcie spôsobujú, že TippyJS je jedným z našich výkonných knižníc jazyka JavaScript na našom zozname, aby sme vytvorili nápovedu.
Darsain Tooltip - Táto knižnica poskytuje základnú implementáciu popisu. Napriek tomu poskytuje rozsiahle možnosti na konfiguráciu správania prílišného typu a a množina názvov tried na zmenu vzhľadu nástroja. Tooltip funguje dobre aj v staršom prehliadači, ako je IE9 av prípade potreby IE8 s niekoľkými úpravami.
Bubb - Bubb môže byť vhodný pre pokročilých používateľov jazyka JavaScript. Použitie jeho rozsiahle rozhrania API, okrem zobrazovania jednoduchého textu, môžete programovo pridať zložitejší obsah HTML do popisu nástroja. Je to úplne v pohode; môžete sa k dokumentom dostať do príkladov.
Popper - Obsahuje technickú abstrakciu na vytvorenie niečoho “POPs”, ako popiska, popup a drop-down. TippyJS ho používa ako nadstavbu knižnice a používa ho veľké mená na webe ako Bootstrap, Microsoft a Atlassian.
YY Tooltip - Na rozdiel od ostatných knižníc YY Tooltip nevyžaduje, aby ste pridali element HTML alebo atribúty. Plne pracuje s jazykom JavaScript a obsah, pozícia a farby sú definované v objekte namiesto elementu HTML. Je to ideálne na použitie v spojení s plnou webovou aplikáciou JavaScript.
Position.js - Ďalšia vynikajúca natívna knižnica JavaScript na vytváranie popisov, Position.js poskytuje GUI na konfiguráciu funkcie a jednoducho skopírovať a vložiť tam vytvorený kód. Position.js možno použiť v spojení s React.js alebo Vue.js.
Bezet Tooltip - Táto knižnica poskytuje 14 možností na zobrazenie popisu; ako napr správny, ľavý, dno, left-center, pravým-end, bottom-centrum, atď. Okrem toho je tiež dosť chytrý, že by to mohol nastavte pozíciu podponuky na základe dostupného miesta obklopujúci nástrojový popis. Pozrite sa na demo.
MouseTip - Táto knižnica JavaScrtipt vytvorí a nápoveda, ktorá sa bude pohybovať pozdĺž pozície kurzora. Nápoveda je konfigurovaná s neštandardným mousetip- namiesto použitia kódu HTML5 dáta- atribútov. Mousetip je k dispozícii ako modul NPM.
Internetips - Podobne ako v prípade MousetTip, nástrojový blok generovaný touto knižnicou nasleduje pozícia kurzora. Všetko je nakonfigurované prostredníctvom objektu JavaScript namiesto HTML a atribúty sú tiež vytvorené pre moderné prehliadače. Je ľahký a rýchly.
MTIP - Knižnica jazyka JavaScript s nástrojom skvelá kompatibilita prehliadača. Je kompatibilný s IE8, plne prispôsobiteľný prostredníctvom možnosti, a môžete pridať Tooltip na ľubovoľný prvok dokonca aj na img (obrazový prvok).
Bubblesee - ľahká JavaScriptová knižnica, ktorá poskytuje priamu funkčnosť a “tooltip”. Je ľahké používať knižnicu JavaScript bez zložitých možností prispôsobenia výstupu. Ak chcete zmeniť vzhľad nástroja, je k dispozícii súbor Sass. Pozrite sa na demo.
Tipfy - Postavený s modernou syntaxou JavaScript, ES6, Tipfy má veľkosť len 2 KB. Knižnica poskytuje dve verzie súborov: tipfy.min.js poskytuje skript s moderná syntax ES6, a tipfy.es5.min.js ak potrebujete kompatibilitu so staršími prehliadačmi. Používa to dáta- atribút prispôsobiť nápovedu; dát tipfy strane, Napríklad sa používa na nastavenie smeru upozornenia a použitia Data-tipfy-textové atribút pridať obsah popisu.
jQuery
Tooltipster - Táto knižnica poskytuje rozsiahle možnosti na prispôsobenie takmer čokoľvek, ako je napríklad tému, animáciu, dotykovú podporu, obsah, otvorený a zatvorený spúšť, atď. Poskytuje aj vlastné poslucháče udalostí a spätné volania, ktoré umožňujú vývojárom rozšíriť popis nástroja pomocou vlastných funkcií. Tiež, ako plugin jQuery, tooltip by fungoval v staršom prehliadači ako IE6 v závislosti od verzie jQuery používaný.
protipo - Iný rozsiahly plugin jQuery, Protip podporuje 49 pozícií, HTML pre obsah nástroja, ikonu, vlastné spätné volania, a oveľa viac. Protip poskytuje grafické rozhranie, ktoré vám umožňuje ľahko prispôsobiť popis nástroja.
Supertip - Tento doplnok jQuery tiež prináša možnosti a rozhrania API, ktoré umožňujú vývojárom niekoľko rôznych spôsobov, ako implementovať popisy nástrojov. Podporuje to navigácia pomocou klávesnice; vytváranie popupu sa objaví pri navigácii s elementmi pútko klávesnica. PowereTip je k dispozícii ako modul NPM. Môže byť použitý so systémami RequireJS a Browserify.
Prístupný tip pre Aria - Plug-in jQuery s funkciou prístupnosti je vstavaný určený na zobrazenie dialógového okna s názvom, viacúrovňovým textom a tlačidlom na zatvorenie. Je to jeden z jeho vlastných na našom zozname.
TipsJS - Jednoduchý jQuery plugin, ale prináša celkom odlišné vlastnosti. obsah nápovede je nastavený a Data-tooltip atribút. Navyše môžeme zabaliť obsah špeciálnymi znakmi na formátovanie obsahu podobného formátovaniu Markdown. Môžeme použiť * aby bol obsah odvážny, ~ pre kurzívu a ^ pre položku.
Dark Tip - Táto knižnica poskytuje niekoľko naozaj užitočných funkcií na napájanie nástroja. Napríklad môžeme pridať a potvrďte tlačidlo - Áno a Nie, stlmenie pozadia pri zobrazovaní popisu nástroja a pridanie prvkov HTML k obsahu. Myslím, že by ste sa naozaj mali pozrieť na demo stránke.
Aria Tooltip - Ďalším popisom s vstavanou funkciou Prístupnosť je tento doplnok jQuery kompatibilný s WAI-ARIA 1.1. Je citlivý tak, ako môžete poskytujú rôzne konfigurácie pre rôzne veľkosti výrezu. Aria Tooltip je k dispozícii ako modul NPM s názvom t-aria-label.
Toolbar.js - Zatiaľ čo iný doplnok jQuery môže zobrazovať iba jednoduchý textový alebo HTML obsah v rámci popisu, toto Doplnok jQuery vytvára panel s nástrojmi. Nápoveda by obsahovala dva alebo viac odkazov s ikonou, ktorá zvyčajne vykoná akciu cvaknutie, ako ľubovoľný panel s nástrojmi. Pozrite si dokumentáciu a príklady.
VueJS
V-Tooltip - V-Tooltip je komponent Vue.js poháňaný Popper.js pod kapotou. Poskytuje a nová smernica pomenovaná v-popisok ktoré je možné pridať do ľubovoľného prvku na vytvorenie popisu. v-popisok môže obsahovať obsah popisu nástroja alebo Možnosti. Okrem zvyku v-popisok môžete tiež pridať popisky pomocou tlačidla v-popover zložkou. S touto zložkou môžete pridajte komplexnejší obsah do popisu nástroja s komponentou Vue.js alebo HTML.
Vtip-Bulma Tooltip - Komponent Vue.js na vytvorenie tooltipu založeného na bulle UI Framework. Táto knižnica je súčasťou komponentu Vue Bulma. Ale komponentu tooltip je k dispozícii ako modul NPM s názvom vue-Bulma-tooltip ktoré môžete použiť ako samostatné súčasti.
Vue-Smernica-Popisok - Celkovo je podobný komponentu V-Tooltip založenému na Popper.js a poskytuje rovnakú smernicu nazvanú v-popisok. Zdá sa však, že to neposkytuje v-popover komponentov.
Vue-Tipp - Táto knižnica zbalí Tippy.js do komponenty Vue.js. Obsahuje vlastnú smernicu Vue.js nazvanú v-Tipp ktorý funguje ako atribút HTML; môžeme pridať obsah pre nápovedu alebo možnosti prispôsobiť ho. To tiež robí a vlastnú komponentu Vue.js na obsahu popisu pomocou html voľba.
VueJS-popover - Vlastná Vue.js s vlastnou smernicou nazvanou v-popover a dve vlastné komponenty
Vue-Tip - Plug Vue.js, ktorý obaluje Hint.css. Funkcie doplnku v-Tip-css pre pridanie popisu. to prináša rovnaký súbor možností ako Hint.css, takže ich môžete pridať ako objekt JavaScript alebo modifikátor Vue.js.
ReactJS
Reagujte na Joyride - Komponent React na zobrazenie množiny popisov nástrojov, ktoré budú nasmerujte nových používateľov, aby ste sa oboznámili s novou aplikáciou.
Reagujte Floater - Táto knižnica obalená Popper.js do zložky React s názvom Floater, takže má rovnaké funkcie ako Floater's. Môžete pridať nástroj a popup a môžete tiež hrajte s touto súčasťou cez toto pieskovisko.
Reagujte na Autotip - Jednoduchý komponent React s automatickou polohovacou funkciou, teda Autotip automaticky nastaví pozíciu nástroja keď sa priestor okolo neho zmení.
Reaguj Tippy - Postavené na vrchole Tippy.js a Popover.js. Táto knižnica predstavuje a popisok komponent, ktorý môžete zahrnúť do aplikácie React.
Reaguj Hint - Komponent React rozšírenia Hint.css. Komponenty pridávajú niekoľko funkcií, ktoré nie sú dostupné v systéme Hint.css, ako napríklad automatickú pozíciu, oneskorenie a funkciu spätného volania.
viac
Najnovšie nápady - Komponent Ember.js na vytváranie popisov, je postavený na vrchole Popper.js. Komponent je tiež navrhnutý s ohľadom na prístupnosť a neustále sa zlepšuje, aby vyhovoval približne 508 požiadavkám v tejto veci.
D3 Tip - doplnok D3.js. D3.js je JavaScriptová knižnica na vizualizáciu dát, ako sú grafy, mapy, diagramy atď. Tento plugin vám umožňuje zobraziť popisku nad týmito údajmi.
